@workbench-kit/react 0.0.2-prototype.0.2.5 → 0.0.2-prototype.0.2.8

package/src/modal/useModalFocusTrap.ts

@@ -0,0 +1,142 @@
+import { useEffect, type RefObject } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+function isFocusable(element: HTMLElement): boolean {
+  if (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true') {
+    return false;
+  }
+  if (element.getAttribute('aria-hidden') === 'true') {
+    return false;
+  }
+  // Explicit tabindex="-1" removes the node from the tab order.
+  // Do not use element.tabIndex >= 0: jsdom reports -1 for native buttons.
+  if (element.getAttribute('tabindex') === '-1') {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  return style.display !== 'none' && style.visibility !== 'hidden';
+}
+
+function listFocusable(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+    isFocusable,
+  );
+}
+
+export interface UseModalFocusTrapOptions {
+  readonly closeOnEscape?: boolean;
+  readonly containerRef: RefObject<HTMLElement | null>;
+  /** When false, skip trap/restore (for dialogs that stay mounted while closed). Default true. */
+  readonly enabled?: boolean;
+  readonly initialFocusRef?: RefObject<HTMLElement | null>;
+  readonly onClose: () => void;
+  readonly restoreFocusOnClose?: boolean;
+}
+
+/**
+ * Trap Tab focus inside a mounted modal dialog and restore focus on unmount.
+ * Escape dismisses when `closeOnEscape` is true (default).
+ */
+export function useModalFocusTrap({
+  closeOnEscape = true,
+  containerRef,
+  enabled = true,
+  initialFocusRef,
+  onClose,
+  restoreFocusOnClose = true,
+}: UseModalFocusTrapOptions): void {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const previousFocus =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+    const focusInitial = () => {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+
+      const preferred = initialFocusRef?.current;
+      if (preferred && container.contains(preferred)) {
+        preferred.focus();
+        return;
+      }
+
+      const focusables = listFocusable(container);
+      if (focusables[0]) {
+        focusables[0].focus();
+        return;
+      }
+
+      if (!container.hasAttribute('tabindex')) {
+        container.tabIndex = -1;
+      }
+      container.focus();
+    };
+
+    const frame = window.requestAnimationFrame(focusInitial);
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && closeOnEscape) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+        return;
+      }
+
+      if (event.key !== 'Tab') {
+        return;
+      }
+
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+
+      const focusables = listFocusable(container);
+      if (focusables.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+
+      const first = focusables[0]!;
+      const last = focusables[focusables.length - 1]!;
+      const active = document.activeElement;
+
+      if (event.shiftKey) {
+        if (active === first || !container.contains(active)) {
+          event.preventDefault();
+          last.focus();
+        }
+        return;
+      }
+
+      if (active === last || !container.contains(active)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown, true);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener('keydown', handleKeyDown, true);
+      if (restoreFocusOnClose && previousFocus?.isConnected) {
+        previousFocus.focus();
+      }
+    };
+  }, [closeOnEscape, containerRef, enabled, initialFocusRef, onClose, restoreFocusOnClose]);
+}

package/src/modal/useModalWindowFrame.ts

@@ -9,8 +9,8 @@ import { useModalResize } from './useModalResize';
 
 export interface UseModalWindowFrameOptions {
   defaultMaximized: boolean;
-  defaultHeight?: number | undefined;
-  defaultWidth?: number | undefined;
+  defaultHeight?: number;
+  defaultWidth?: number;
   minHeight: number;
   minWidth: number;
 }

package/src/primitives/absolute-box/AbsoluteBox.tsx

@@ -9,12 +9,12 @@ export interface WorkbenchRect {
 }
 
 export interface AbsoluteBoxProps {
-  background?: string | undefined;
+  background?: string;
   children?: ReactNode;
-  className?: string | undefined;
-  overflow?: CSSProperties['overflow'] | undefined;
+  className?: string;
+  overflow?: CSSProperties['overflow'];
   rect: WorkbenchRect;
-  style?: CSSProperties | undefined;
+  style?: CSSProperties;
 }
 
 export function AbsoluteBox({

package/src/primitives/button/Button.tsx

@@ -6,10 +6,10 @@ import { cx } from '../../utils/cx';
 type ButtonVariant = 'default' | 'primary' | 'danger';
 
 export interface ButtonProps extends ComponentPropsWithRef<'button'> {
-  block?: boolean | undefined;
-  compact?: boolean | undefined;
-  icon?: string | undefined;
-  secondary?: boolean | undefined;
+  block?: boolean;
+  compact?: boolean;
+  icon?: string;
+  secondary?: boolean;
   variant?: ButtonVariant;
 }
 

package/src/primitives/catalog-browse-card/CatalogBrowseCard.tsx

@@ -11,9 +11,9 @@ export interface CatalogBrowseCardProps extends Omit<
   'children' | 'title'
 > {
   description?: ReactNode;
-  icon?: string | undefined;
-  imageAlt?: string | undefined;
-  imageUrl?: string | null | undefined;
+  icon?: string;
+  imageAlt?: string;
+  imageUrl?: string | null;
   label: ReactNode;
   /**
    * Custom media content for the icon/cover region. When set, replaces the
@@ -23,15 +23,15 @@ export interface CatalogBrowseCardProps extends Omit<
   /** Overlay content inside the media region (badges, status chips, etc.). */
   mediaOverlay?: ReactNode;
   meta?: ReactNode;
-  selected?: boolean | undefined;
+  selected?: boolean;
   /**
    * Secondary actions outside the primary hit target (for example Assign).
    * When set, the root becomes a non-button container and click/drag handlers
    * apply to the main control only.
    */
   trailing?: ReactNode;
-  tooltip?: string | undefined;
-  variant?: CatalogBrowseCardVariant | undefined;
+  tooltip?: string;
+  variant?: CatalogBrowseCardVariant;
 }
 
 export function CatalogBrowseCard({

package/src/primitives/catalog-browse-pane/CatalogBrowsePane.tsx

@@ -33,12 +33,12 @@ export type CatalogBrowseViewMode = 'grid' | 'list';
  * Hosts with richer cards should pass `renderGridItem` / `renderListItem`.
  */
 export interface CatalogBrowseItem {
-  readonly description?: string | null | undefined;
+  readonly description?: string | null;
   readonly id: string;
-  readonly imageAlt?: string | undefined;
-  readonly imageUrl?: string | null | undefined;
+  readonly imageAlt?: string;
+  readonly imageUrl?: string | null;
   readonly label: string;
-  readonly meta?: string | null | undefined;
+  readonly meta?: string | null;
 }
 
 export interface CatalogBrowseItemRenderState {
@@ -48,17 +48,17 @@ export interface CatalogBrowseItemRenderState {
 export interface CatalogBrowsePaneProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
   readonly clearSearchLabel: string;
   readonly emptyMessage: string;
-  readonly errorMessage?: string | null | undefined;
+  readonly errorMessage?: string | null;
   /** Slot between search and sort/view controls (facet trigger, chips, etc.). */
   readonly facetStrip?: ReactNode;
-  readonly gridAriaLabel?: string | undefined;
+  readonly gridAriaLabel?: string;
   /** Visual label for the grid view-mode segment (string or icon node). */
   readonly gridLabel?: ReactNode;
   readonly hasMore: boolean;
   readonly isLoading: boolean;
   readonly isLoadingMore: boolean;
   readonly items: ReadonlyArray<CatalogBrowseItem>;
-  readonly listAriaLabel?: string | undefined;
+  readonly listAriaLabel?: string;
   /** Visual label for the list view-mode segment (string or icon node). */
   readonly listLabel?: ReactNode;
   readonly loadingMessage: string;
@@ -66,11 +66,11 @@ export interface CatalogBrowsePaneProps extends Omit<ComponentPropsWithRef<'div'
     ((itemId: string, itemLabel: string, event: ReactMouseEvent<HTMLElement>) => void) | undefined;
   readonly onLoadMore: () => void;
   readonly onOpenItem: (itemId: string) => void;
-  readonly onRefresh?: (() => void) | null | undefined;
+  readonly onRefresh?: (() => void) | null;
   readonly onSearchQueryChange: (query: string) => void;
-  readonly onSortChange?: ((sort: string) => void) | undefined;
+  readonly onSortChange?: (sort: string) => void;
   readonly onViewModeChange: (viewMode: CatalogBrowseViewMode) => void;
-  readonly refreshLabel?: string | null | undefined;
+  readonly refreshLabel?: string | null;
   readonly renderGridItem?:
     ((item: CatalogBrowseItem, state: CatalogBrowseItemRenderState) => ReactNode) | undefined;
   readonly renderListItem?:
@@ -78,14 +78,14 @@ export interface CatalogBrowsePaneProps extends Omit<ComponentPropsWithRef<'div'
   readonly searchAriaLabel: string;
   readonly searchPlaceholder: string;
   readonly searchQuery: string;
-  readonly selectedItemId?: string | null | undefined;
-  readonly sort?: string | undefined;
-  readonly sortAriaLabel?: string | undefined;
-  readonly sortOptions?: ReadonlyArray<{ label: string; value: string }> | undefined;
+  readonly selectedItemId?: string | null;
+  readonly sort?: string;
+  readonly sortAriaLabel?: string;
+  readonly sortOptions?: ReadonlyArray<{ label: string; value: string }>;
   /** Extra trailing controls after built-in sort / view mode (before refresh). */
   readonly toolbarTrailing?: ReactNode;
   readonly viewMode: CatalogBrowseViewMode;
-  readonly viewModeAriaLabel?: string | undefined;
+  readonly viewModeAriaLabel?: string;
 }
 
 export function CatalogBrowsePane({

package/src/primitives/catalog-filter-overlay/CatalogFilterOverlay.tsx

@@ -13,10 +13,10 @@ export interface CatalogFilterOverlayProps extends Omit<
    * When true, Clear stays mounted and sized but is not actionable.
    * Keeps the title row height stable across selection changes.
    */
-  readonly clearDisabled?: boolean | undefined;
+  readonly clearDisabled?: boolean;
   readonly clearLabel: string;
   readonly onClear: () => void;
-  readonly ref?: Ref<HTMLDivElement> | undefined;
+  readonly ref?: Ref<HTMLDivElement>;
   readonly title: ReactNode;
   readonly titleId: string;
 }

package/src/primitives/checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import type { ChangeEvent, ComponentPropsWithRef, ReactNode } from 'react';
 import { cx } from '../../utils/cx';
 
 export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type'> {
-  label?: ReactNode | undefined;
+  label?: ReactNode;
   onCheckedChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 }
 

package/src/primitives/chip/Chip.tsx

@@ -4,9 +4,9 @@ import { Button } from '../button';
 import { cx } from '../../utils/cx';
 
 export interface ChipProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
-  count?: number | undefined;
+  count?: number;
   label: ReactNode;
-  onDismiss?: (() => void) | undefined;
+  onDismiss?: () => void;
 }
 
 /**

package/src/primitives/codicon/Codicon.tsx

@@ -4,7 +4,7 @@ import { cxCodicon } from '../../utils/codicon';
 export interface CodiconProps extends Omit<ComponentPropsWithRef<'i'>, 'children'> {
   icon: string;
   /** When set, exposes the icon to assistive tech instead of aria-hidden. */
-  label?: string | undefined;
+  label?: string;
 }
 
 /** VS Code codicon glyph (`codicon` font). Requires `@vscode/codicons` CSS in the app entry. Prefer `WorkbenchIcon` for new code. */

package/src/primitives/file-icon/FileIcon.tsx

@@ -6,7 +6,7 @@ export const UI_FILE_ICON_CLASS = 'ui-file-icon';
 
 export interface FileIconProps extends Omit<ComponentPropsWithRef<'i'>, 'children'> {
   icon: string;
-  kind?: FileIconKind | undefined;
+  kind?: FileIconKind;
 }
 
 export function FileIcon({ className, icon, kind, ...props }: FileIconProps) {

package/src/primitives/icon-button/IconButton.tsx

@@ -7,7 +7,7 @@ import { cx } from '../../utils/cx';
 type IconButtonVariant = 'default' | 'danger';
 
 export interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
-  compact?: boolean | undefined;
+  compact?: boolean;
   icon: WorkbenchIconInput;
   label: string;
   variant?: IconButtonVariant;

package/src/primitives/library-detail-layout/LibraryDetailLayout.tsx

@@ -13,13 +13,13 @@ export interface LibraryDetailLayoutProps extends Omit<
   'children' | 'title'
 > {
   readonly actions?: ReactNode;
-  readonly backgroundImageUrl?: string | null | undefined;
+  readonly backgroundImageUrl?: string | null;
   readonly children?: ReactNode;
-  readonly coverAlt?: string | undefined;
-  readonly coverImageUrl?: string | null | undefined;
+  readonly coverAlt?: string;
+  readonly coverImageUrl?: string | null;
   readonly description?: ReactNode;
-  readonly logoImageUrl?: string | null | undefined;
-  readonly mode?: LibraryDetailLayoutMode | undefined;
+  readonly logoImageUrl?: string | null;
+  readonly mode?: LibraryDetailLayoutMode;
   readonly summary?: ReactNode;
   readonly title: ReactNode;
   readonly toolbar?: ReactNode;

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/record-media-hero/RecordMediaHero.tsx

@@ -9,12 +9,12 @@ 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;
 }
 
 function resolveMaxWidth(maxWidth: number | string | undefined): CSSProperties['maxWidth'] {

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/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,20 @@ 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';
 }
 
 export function WorkbenchMediaSlot({