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

package/src/primitives/library-facet-filter-panel/LibraryFacetFilterPanel.tsx

@@ -38,7 +38,7 @@ export interface LibraryFacetSection {
    * Uncontrolled initial collapsed state when `collapsibleSections` is true.
    * When omitted, sections start expanded.
    */
-  readonly defaultCollapsed?: boolean | undefined;
+  readonly defaultCollapsed?: boolean;
   readonly fields: ReadonlyArray<LibraryFacetField>;
   readonly id: string;
 }
@@ -46,33 +46,33 @@ export interface LibraryFacetSection {
 export interface LibraryFacetFilterPanelLabels {
   readonly clearAll: string;
   readonly clearChipAria: (chipLabel: string) => string;
-  readonly empty?: string | undefined;
+  readonly empty?: string;
   /** Aria/placeholder for searchable facet input. Default: "Search options". */
-  readonly filterOptions?: string | undefined;
+  readonly filterOptions?: string;
   /** Shown when option filter matches nothing. Default: "No matching options". */
-  readonly noMatchingOptions?: string | undefined;
+  readonly noMatchingOptions?: string;
 }
 
 export interface LibraryFacetFilterPanelProps {
-  readonly activeChips?: ReadonlyArray<LibraryFacetActiveChip> | undefined;
-  readonly className?: string | undefined;
+  readonly activeChips?: ReadonlyArray<LibraryFacetActiveChip>;
+  readonly className?: string;
   /**
    * When true, section headers toggle collapse.
    * Default false — keeps all sections expanded.
    */
-  readonly collapsibleSections?: boolean | undefined;
-  readonly description?: string | undefined;
+  readonly collapsibleSections?: boolean;
+  readonly description?: string;
   readonly labels: LibraryFacetFilterPanelLabels;
   /** Required when `showActiveChips` is true (chip strip Clear). Host may own Clear otherwise. */
-  readonly onClearAll?: (() => void) | undefined;
-  readonly onRemoveChip?: ((chipId: string) => void) | undefined;
+  readonly onClearAll?: () => void;
+  readonly onRemoveChip?: (chipId: string) => void;
   readonly onToggleFacetValue: (
     fieldId: string,
     value: string,
     kind: LibraryFacetFieldKind,
   ) => void;
   readonly resolveFieldLabel: (fieldId: string) => string;
-  readonly resolveSectionLabel?: ((sectionId: string) => string) | undefined;
+  readonly resolveSectionLabel?: (sectionId: string) => string;
   readonly sections: ReadonlyArray<LibraryFacetSection>;
   readonly selectedValues: Readonly<Record<string, readonly string[]>>;
   /**
@@ -80,7 +80,7 @@ export interface LibraryFacetFilterPanelProps {
    * selection). Hosts should place Clear in their own header chrome.
    * Default true for backward compatibility.
    */
-  readonly showActiveChips?: boolean | undefined;
+  readonly showActiveChips?: boolean;
 }
 
 function sectionHasSelection(

package/src/primitives/library-facet-filter-strip/LibraryFacetFilterStrip.tsx

@@ -26,7 +26,7 @@ export type LibraryFacetFieldKind = 'single-select' | 'multi-select';
 export type LibraryFacetFieldPresentation = 'checklist' | 'searchable-multi';
 
 export interface LibraryFacetFieldOption {
-  readonly count?: number | undefined;
+  readonly count?: number;
   readonly label: string;
   readonly value: string;
 }
@@ -43,7 +43,7 @@ export interface LibraryFacetField {
    * Panel presentation hint. When omitted, long multi-select lists use
    * `searchable-multi` and short lists use `checklist`.
    */
-  readonly presentation?: LibraryFacetFieldPresentation | undefined;
+  readonly presentation?: LibraryFacetFieldPresentation;
 }
 
 export interface LibraryFacetActiveChip {
@@ -61,9 +61,9 @@ export interface LibraryFacetFilterStripProps {
    * When set with `onOpenMoreFilters`, replaces cascade show-more/less with a
    * menu item that opens the fuller facet panel/dialog.
    */
-  readonly moreFiltersLabel?: string | undefined;
+  readonly moreFiltersLabel?: string;
   readonly onClearAll: () => void;
-  readonly onOpenMoreFilters?: (() => void) | undefined;
+  readonly onOpenMoreFilters?: () => void;
   readonly onShowLess: () => void;
   readonly onShowMore: () => void;
   readonly onToggleFacetValue: (

package/src/primitives/number-input/NumberInput.tsx

@@ -17,16 +17,16 @@ export interface NumberInputProps extends Omit<
   TextInputProps,
   'defaultValue' | 'onValueChange' | 'type' | 'value'
 > {
-  defaultValue?: number | undefined;
+  defaultValue?: number;
   /**
    * When true, `undefined` renders as an empty field. Clearing the input calls
    * `onEmptyValue` (preferred) instead of `onValueChange`.
    */
-  nullable?: boolean | undefined;
+  nullable?: boolean;
   /** Fired when a nullable field is cleared. */
-  onEmptyValue?: (() => void) | undefined;
-  onValueChange?: ((value: number, event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-  value?: number | undefined;
+  onEmptyValue?: () => void;
+  onValueChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void;
+  value?: number;
 }
 
 function resolveStep(step: TextInputProps['step']): number {

package/src/primitives/primitives.css

@@ -1,5 +1,6 @@
 /* Primitives component styles — co-located per component folder.
  * Leaf files are imported from owning TSX for HMR; this hub keeps CSS-only bundles working. */
+@import './app-icon/app-icon.css';
 @import './badge/badge.css';
 @import './button/button.css';
 @import './chip/chip.css';

package/src/primitives/record-media-hero/RecordMediaHero.tsx

@@ -9,12 +9,14 @@ import { WorkbenchMediaSlot } from '../workbench-media-slot';
 export type RecordMediaHeroLayout = 'banner' | 'compact' | 'background';
 
 export interface RecordMediaHeroProps extends ComponentPropsWithRef<'div'> {
-  alt?: string | undefined;
-  fallbackIcon?: string | undefined;
-  imageUrl?: string | null | undefined;
-  layout?: RecordMediaHeroLayout | undefined;
-  logoUrl?: string | null | undefined;
-  maxWidth?: number | string | undefined;
+  alt?: string;
+  fallbackIcon?: string;
+  imageUrl?: string | null;
+  layout?: RecordMediaHeroLayout;
+  logoUrl?: string | null;
+  maxWidth?: number | string;
+  /** Forwarded when the primary hero/cover image fails to load. */
+  onImageError?: () => void;
 }
 
 function resolveMaxWidth(maxWidth: number | string | undefined): CSSProperties['maxWidth'] {
@@ -33,6 +35,7 @@ export function RecordMediaHero({
   layout = 'banner',
   logoUrl = null,
   maxWidth,
+  onImageError,
   style,
   ...props
 }: RecordMediaHeroProps) {
@@ -66,6 +69,7 @@ export function RecordMediaHero({
         imageClassName="ui-record-media-hero__image"
         imageUrl={imageUrl}
         loading="eager"
+        onImageError={onImageError}
       />
       {logoMedia.shouldShowImage ? (
         <img

package/src/primitives/scroll-area/ScrollArea.tsx

@@ -19,11 +19,11 @@ export type ScrollAreaOrientation = 'both' | 'horizontal' | 'vertical';
 export type ScrollAreaScrollbarVisibility = 'auto' | 'hidden' | 'overlay';
 
 export interface ScrollAreaProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
-  as?: ElementType | undefined;
-  children?: ReactNode | undefined;
-  gutter?: ScrollAreaGutter | undefined;
-  orientation?: ScrollAreaOrientation | undefined;
-  scrollbars?: ScrollAreaScrollbarVisibility | undefined;
+  as?: ElementType;
+  children?: ReactNode;
+  gutter?: ScrollAreaGutter;
+  orientation?: ScrollAreaOrientation;
+  scrollbars?: ScrollAreaScrollbarVisibility;
 }
 
 type OverlayThumb = {

package/src/primitives/scroll-area-infinite-load/useScrollAreaInfiniteLoad.ts

@@ -3,13 +3,13 @@ import { useEffect, useRef, type RefObject } from 'react';
 const DEFAULT_ROOT_MARGIN = '0px 0px 120px 0px';
 
 export interface UseScrollAreaInfiniteLoadOptions {
-  enabled?: boolean | undefined;
+  enabled?: boolean;
   hasMore: boolean;
-  isLoading?: boolean | undefined;
-  isLoadingMore?: boolean | undefined;
+  isLoading?: boolean;
+  isLoadingMore?: boolean;
   onLoadMore: () => void | Promise<void>;
-  rootMargin?: string | undefined;
-  scrollAreaRef?: RefObject<HTMLElement | null> | undefined;
+  rootMargin?: string;
+  scrollAreaRef?: RefObject<HTMLElement | null>;
 }
 
 export interface UseScrollAreaInfiniteLoadResult {

package/src/primitives/searchable-multi-select/SearchableMultiSelect.tsx

@@ -25,24 +25,24 @@ import {
 } from './overlay';
 
 export interface SearchableMultiSelectOption {
-  readonly count?: number | undefined;
-  readonly disabled?: boolean | undefined;
+  readonly count?: number;
+  readonly disabled?: boolean;
   readonly label: string;
   readonly value: string;
 }
 
 export interface SearchableMultiSelectProps {
   readonly 'aria-label'?: string | undefined;
-  readonly className?: string | undefined;
-  readonly disabled?: boolean | undefined;
+  readonly className?: string;
+  readonly disabled?: boolean;
   /** Shown when the query matches no options. Default: "No matching options". */
-  readonly emptyMessage?: string | undefined;
+  readonly emptyMessage?: string;
   /** Aria label for dismissible selected chips. Default: "Remove {label}". */
-  readonly getRemoveChipAriaLabel?: ((optionLabel: string) => string) | undefined;
+  readonly getRemoveChipAriaLabel?: (optionLabel: string) => string;
   readonly onValueToggle: (value: string) => void;
   readonly options: ReadonlyArray<SearchableMultiSelectOption>;
   /** Search input placeholder. Default: "Search". */
-  readonly searchPlaceholder?: string | undefined;
+  readonly searchPlaceholder?: string;
   readonly selectedValues: readonly string[];
 }
 

package/src/primitives/select/Select.tsx

@@ -16,6 +16,7 @@ import type { ControlWidth } from '../text-input/TextInput';
 import { cxCodicon } from '../../utils/codicon';
 import { cx } from '../../utils/cx';
 import { getEnabledOptionIndex, parseOptions } from './options';
+import { resolvePortalContainer } from '../searchable-multi-select/overlay';
 import { isTriggerVisible, measureOverlayPosition, overlayListboxStyle } from './overlay';
 import type { OverlayPosition, ParsedOption } from './types';
 
@@ -24,19 +25,6 @@ export interface SelectProps extends ComponentPropsWithRef<'select'> {
   onValueChange?: (value: string, event: ChangeEvent<HTMLSelectElement>) => void;
 }
 
-/**
- * Portaling straight to `document.body` escapes the workbench root (`[data-theme-preset]`),
- * which re-declares theme tokens locally and shadows whatever a contributed theme overrides
- * on `document.documentElement`. Prefer themed hosts / overlay roots when present.
- */
-function resolvePortalContainer(trigger: HTMLElement | null): HTMLElement {
-  return (
-    trigger?.closest<HTMLElement>(
-      '[data-theme-preset], [data-theme], .ui-workbench-host-root, .ide-workbench-overlays',
-    ) ?? document.body
-  );
-}
-
 export function Select({
   className,
   controlWidth = 'default',

package/src/primitives/text-area/TextArea.tsx

@@ -7,7 +7,7 @@ type ControlWidth = 'default' | 'wide' | 'full';
 export interface TextAreaProps extends ComponentPropsWithRef<'textarea'> {
   controlWidth?: ControlWidth;
   monospace?: boolean;
-  resize?: CSSProperties['resize'] | undefined;
+  resize?: CSSProperties['resize'];
 }
 
 export function TextArea({

package/src/primitives/text-input/TextInput.tsx

@@ -7,7 +7,7 @@ export type ControlWidth = 'default' | 'wide' | 'full';
 export interface TextInputProps extends ComponentPropsWithRef<'input'> {
   controlWidth?: ControlWidth;
   monospace?: boolean;
-  onValueChange?: ((value: string, event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+  onValueChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export function TextInput({

package/src/primitives/workbench-media-slot/WorkbenchMediaPlaceholder.tsx

@@ -4,8 +4,8 @@ import { cxCodicon } from '../../utils/codicon';
 import { cx } from '../../utils/cx';
 
 export interface WorkbenchMediaPlaceholderProps extends ComponentPropsWithRef<'span'> {
-  icon?: string | undefined;
-  iconClassName?: string | undefined;
+  icon?: string;
+  iconClassName?: string;
 }
 
 /**

package/src/primitives/workbench-media-slot/WorkbenchMediaSlot.tsx

@@ -6,20 +6,22 @@ import { useWorkbenchMediaImage } from '../../utils/useWorkbenchMediaImage';
 import { WorkbenchMediaPlaceholder } from './WorkbenchMediaPlaceholder';
 
 export interface WorkbenchMediaSlotProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
-  alt?: string | undefined;
-  as?: 'div' | 'span' | undefined;
-  fallback?: ReactNode | undefined;
-  fallbackClassName?: string | undefined;
-  fallbackIcon?: string | undefined;
+  alt?: string;
+  as?: 'div' | 'span';
+  fallback?: ReactNode;
+  fallbackClassName?: string;
+  fallbackIcon?: string;
   /** Stretch to fill the parent box (hero/cover surfaces). */
-  fill?: boolean | undefined;
-  imageClassName?: string | undefined;
-  imageUrl?: string | null | undefined;
+  fill?: boolean;
+  imageClassName?: string;
+  imageUrl?: string | null;
   /**
    * Native image loading hint. Defaults to `lazy` for list/thumbnail surfaces.
    * Pass `eager` for above-the-fold heroes and detail identity art.
    */
-  loading?: 'eager' | 'lazy' | undefined;
+  loading?: 'eager' | 'lazy';
+  /** Optional host callback after the slot marks the current URL as failed. */
+  onImageError?: () => void;
 }
 
 export function WorkbenchMediaSlot({
@@ -33,6 +35,7 @@ export function WorkbenchMediaSlot({
   imageClassName,
   imageUrl = null,
   loading = 'lazy',
+  onImageError,
   ...props
 }: WorkbenchMediaSlotProps) {
   const media = useWorkbenchMediaImage(imageUrl);
@@ -47,7 +50,10 @@ export function WorkbenchMediaSlot({
           alt={alt ?? ''}
           className={cx('ui-workbench-media-slot__image', imageClassName)}
           loading={loading}
-          onError={media.onImageError}
+          onError={() => {
+            media.onImageError();
+            onImageError?.();
+          }}
           src={media.imageSrc}
         />
       ) : (

package/src/primitives/workbench-thumbnail/WorkbenchThumbnail.tsx

@@ -7,10 +7,10 @@ import { WorkbenchMediaSlot } from '../workbench-media-slot';
 export type WorkbenchThumbnailSize = 'sm' | 'md' | 'library' | 'icon';
 
 export interface WorkbenchThumbnailProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
-  alt?: string | undefined;
-  fallbackIcon?: string | undefined;
-  imageUrl?: string | null | undefined;
-  size?: WorkbenchThumbnailSize | undefined;
+  alt?: string;
+  fallbackIcon?: string;
+  imageUrl?: string | null;
+  size?: WorkbenchThumbnailSize;
 }
 
 export function WorkbenchThumbnail({

package/src/scrollbars.css

@@ -117,9 +117,7 @@
   background-clip: content-box;
 }
 
-.ui-workbench-scrollbar--hidden,
-.workbench-primary-sidebar .ui-sidebar-view__body,
-.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
+.ui-workbench-scrollbar--hidden {
   scrollbar-gutter: auto;
   scrollbar-width: none;
 }
@@ -136,9 +134,7 @@
 }
 
 .ui-workbench-scrollbar--hidden::-webkit-scrollbar,
-.ui-workbench-scrollbar--overlay::-webkit-scrollbar,
-.workbench-primary-sidebar .ui-sidebar-view__body::-webkit-scrollbar,
-.workbench-primary-sidebar .ui-workbench-sidebar-section__content::-webkit-scrollbar {
+.ui-workbench-scrollbar--overlay::-webkit-scrollbar {
   width: 0;
   height: 0;
 }

package/src/styles/core.css

@@ -0,0 +1,16 @@
+/* Core Workbench host styles.
+ * Auth and Chat are intentionally excluded so hosts only pay for those
+ * product surfaces when they opt into the full `styles.css` bundle. */
+@import '@workbench-kit/tokens/styles.css';
+@import '@vscode/codicons/dist/codicon.css';
+@import '../scrollbars.css';
+@import '../workbench/settings/settings.css';
+@import '../layout/layout.css';
+@import '../overlay/overlay.css';
+@import '../workbench/chrome/workbench-chrome.css';
+@import '../workbench/management/management.css';
+@import '../workbench/views/views.css';
+@import '../workbench/workspace/workspace.css';
+@import '../primitives/primitives.css';
+@import '../workbench/widgets/widgets.css';
+@import '../modal/modal.css';

package/src/styles/foundation.css

@@ -0,0 +1,4 @@
+/* Shared theme, icon, and scrollbar foundation for focused CSS compositions. */
+@import '@workbench-kit/tokens/styles.css';
+@import '@vscode/codicons/dist/codicon.css';
+@import '../scrollbars.css';

package/src/styles/overlay.css

@@ -0,0 +1,2 @@
+/* Context-menu overlays for focused non-shell compositions. */
+@import '../overlay/overlay.css';

package/src/styles.css

@@ -1,17 +1,3 @@
-@import '@workbench-kit/tokens/styles.css';
-@import '@vscode/codicons/dist/codicon.css';
-@import './scrollbars.css';
-@import './workbench-menu-surfaces.css';
-@import './workbench/settings/settings.css';
-@import './layout/layout.css';
-@import './overlay/overlay.css';
-@import './workbench/workbench-chrome.css';
+@import './styles/core.css';
 @import './workbench/auth/auth.css';
-@import './workbench/management/management.css';
-@import './workbench/views/views.css';
-@import './workbench/workspace/workspace.css';
 @import './workbench/chat/chat.css';
-@import './primitives/primitives.css';
-@import './workbench/widgets/widgets.css';
-@import './workbench/jdw/jdw.css';
-@import './modal/modal.css';

package/src/utils/clamp.ts

@@ -0,0 +1,4 @@
+/** Clamp a finite number into the inclusive `[min, max]` range. */
+export function clampNumber(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/utils/normalizeKeyToken.ts

@@ -0,0 +1,13 @@
+/** Normalize a keyboard shortcut token to a stable lowercase key name. */
+export 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';
+  if (key === 'arrowup' || key === 'up') return 'arrowup';
+  if (key === 'arrowdown' || key === 'down') return 'arrowdown';
+  if (key === 'arrowleft' || key === 'left') return 'arrowleft';
+  if (key === 'arrowright' || key === 'right') return 'arrowright';
+  return key;
+}

package/src/utils/readNumber.ts

@@ -0,0 +1,4 @@
+/** Return a finite number, or `undefined` when the value is not usable as one. */
+export function readNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}

package/src/widget-tree/WidgetSourceEditor.tsx

@@ -11,7 +11,6 @@ import {
 import {
   JsonCodeEditorPane,
   type JsonEditorRange,
-  type JsonEditorPosition,
   type JsonEditorProblem,
 } from '../jdw/JsonCodeEditorPane.js';
 import { JDW_WIDGET_DOCUMENT_MIME } from '../jdw/document.js';
@@ -34,19 +33,6 @@ export interface WidgetSourceEditorProps {
   readonly onSelectPath?: ((path: WidgetPath) => void) | undefined;
 }
 
-export function resolveWidgetSourceRevealPosition(
-  source: string,
-  path: WidgetPath | null | undefined,
-): JsonEditorPosition | null {
-  const position = resolveWidgetSourceActiveRange(source, path);
-  if (!position) return null;
-
-  return {
-    column: position.startColumn,
-    lineNumber: position.startLineNumber,
-  };
-}
-
 export function resolveWidgetSourceActiveRange(
   source: string,
   path: WidgetPath | null | undefined,

package/src/widget-tree/WidgetTreeCanvasPreview.tsx

@@ -26,6 +26,7 @@ import {
   type WidgetResizeHandlePosition,
 } from '@workbench-kit/jdw';
 
+import { readNumber } from '../utils/readNumber';
 import {
   WorkbenchCanvasFrameHandle,
   WorkbenchCanvasItemFrame,
@@ -40,6 +41,7 @@ import { usePreviewViewport } from '../layout/usePreviewViewport.js';
 import { JdwPreview } from '../jdw/JdwPreview.js';
 import { readWidgetPlacementAssetDragData } from './widget-placement-asset-dnd.js';
 import { canAddChildren, insertedWidgetPathForParent } from './widget-tree-layout.js';
+import type { WidgetTreeAssetDropOperation } from './WidgetTreeView.js';
 
 const RESIZE_HANDLE_POSITIONS = [
   'n',
@@ -67,12 +69,7 @@ export interface WidgetTreeCanvasPreviewProps {
   readonly onSelectPath: (path: WidgetPath) => void;
 }
 
-export interface WidgetTreeCanvasAssetDropOperation {
-  readonly asset: WidgetPlacementAsset;
-  readonly parentPath: WidgetPath;
-  readonly insertIndex: number;
-  readonly nextPath: WidgetPath;
-}
+export type WidgetTreeCanvasAssetDropOperation = WidgetTreeAssetDropOperation;
 
 interface WidgetTreeCanvasAssetDropTarget {
   readonly insertIndex: number;
@@ -221,10 +218,6 @@ function readPositiveInteger(value: unknown): number | null {
   return Math.floor(value);
 }
 
-function readNumber(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
-
 function appendLineRect(rect: Rect, axis: 'x' | 'y', children: readonly LayoutNodeResult[]): Rect {
   const lastChildRect = children[children.length - 1]?.rect;
   if (axis === 'x') {

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/WidgetTreeWorkspaceShell.tsx

@@ -6,8 +6,8 @@ import {
 import { validateJsonWidgetData } from '@workbench-kit/jdw';
 
 import { SideBarViewFrame } from '../layout/sidebar';
-import { WorkbenchShell } from '../workbench/WorkbenchShell.js';
-import type { StatusBarSectionModel } from '../workbench/StatusBar.js';
+import { WorkbenchShell } from '../workbench/shell/WorkbenchShell.js';
+import type { StatusBarSectionModel } from '../workbench/shell/StatusBar.js';
 import {
   useVirtualWorkspace,
   WorkspaceDraftsProvider,

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 {