@workbench-kit/react 0.0.2-prototype.0.2.2 → 0.0.2-prototype.0.2.21

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

@@ -9,6 +9,7 @@ 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';
@@ -187,7 +188,7 @@ export function useWorkbenchNotice(): WorkbenchNoticeController {
 }
 
 function resolveNoticeViewportClassName(position: WorkbenchNoticePosition): string {
-  return joinClasses(
+  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',
   );
@@ -205,7 +206,3 @@ function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
     minWidth: 'min(420px, calc(100vw - 32px))',
   };
 }
-
-function joinClasses(...classes: Array<string | undefined>): string {
-  return classes.filter(Boolean).join(' ');
-}

package/src/workbench/management/createWorkbenchNotify.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+
+import type {
+  ShowWorkbenchNoticeInput,
+  WorkbenchNoticeController,
+  WorkbenchNoticeTone,
+} from './WorkbenchNotice.js';
+
+export interface WorkbenchNotificationAction {
+  readonly label: string;
+  readonly onAction: () => void;
+}
+
+export interface WorkbenchNotifyOptions {
+  readonly actions?: readonly WorkbenchNotificationAction[];
+  readonly dataAttributes?: ShowWorkbenchNoticeInput['dataAttributes'];
+  readonly durationMs?: number;
+  readonly id?: string;
+}
+
+/**
+ * NotificationService-shaped facade over {@link WorkbenchNoticeController}.
+ * Prefer this for command/install/save feedback; keep modal confirms separate.
+ */
+export interface WorkbenchNotify {
+  info(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  error(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  success(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  warning(message: ReactNode, options?: WorkbenchNotifyOptions): string;
+  dismiss(id: string): void;
+  clear(): void;
+}
+
+function showTone(
+  controller: WorkbenchNoticeController,
+  tone: WorkbenchNoticeTone,
+  message: ReactNode,
+  options: WorkbenchNotifyOptions = {},
+): string {
+  const { actions, dataAttributes, durationMs, id } = options;
+  const noticeId = id ?? `workbench-notify-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+  const noticeMessage =
+    actions && actions.length > 0 ? (
+      <span className="ui-workbench-notify-message">
+        <span className="ui-workbench-notify-message__text">{message}</span>
+        <span className="ui-workbench-notify-message__actions">
+          {actions.map((action) => (
+            <button
+              className="ui-workbench-notify-message__action"
+              key={action.label}
+              type="button"
+              onClick={() => {
+                action.onAction();
+                controller.dismissNotice(noticeId);
+              }}
+            >
+              {action.label}
+            </button>
+          ))}
+        </span>
+      </span>
+    ) : (
+      message
+    );
+
+  return controller.showNotice({
+    ...(dataAttributes === undefined ? {} : { dataAttributes }),
+    ...(durationMs === undefined ? {} : { durationMs }),
+    id: noticeId,
+    message: noticeMessage,
+    tone,
+  });
+}
+
+/**
+ * Create a `notify.info` / `notify.error` facade over an existing notice controller.
+ */
+export function createWorkbenchNotify(controller: WorkbenchNoticeController): WorkbenchNotify {
+  return {
+    info: (message, options) => showTone(controller, 'info', message, options),
+    error: (message, options) => showTone(controller, 'error', message, options),
+    success: (message, options) => showTone(controller, 'success', message, options),
+    warning: (message, options) => showTone(controller, 'warning', message, options),
+    dismiss: (noticeId) => controller.dismissNotice(noticeId),
+    clear: () => controller.clearNotices(),
+  };
+}

package/src/workbench/management/extension-install-approval.ts

@@ -0,0 +1,72 @@
+import type { ExtensionCatalogBrowseEntry, ExtensionInstallOptions } from './types.js';
+
+export function extensionInstallRequiresApproval(entry: ExtensionCatalogBrowseEntry): boolean {
+  return Boolean(
+    entry.installPlan?.requiresApproval && !entry.installed && !entry.installPlan.blocked,
+  );
+}
+
+export function formatExtensionInstallApprovalMessage(entry: ExtensionCatalogBrowseEntry): string {
+  const permissions = entry.installPlan?.permissions ?? [];
+  const permissionLine =
+    permissions.length > 0
+      ? `Requested permissions: ${permissions.join(', ')}.`
+      : 'This package requests privileges that require approval.';
+
+  return [
+    `Install "${entry.displayName}"?`,
+    '',
+    permissionLine,
+    'Continue only if you trust this package.',
+  ].join('\n');
+}
+
+export interface ResolveExtensionInstallOptionsInput {
+  readonly confirm?: ((message: string) => boolean) | undefined;
+  /**
+   * When true (or when the predicate returns true), skip the confirm prompt and
+   * return `{ approved: true }`. Hosts typically back this with a durable trust
+   * store keyed by extension id + permission fingerprint.
+   */
+  readonly isTrusted?: boolean | ((entry: ExtensionCatalogBrowseEntry) => boolean) | undefined;
+  /** Called after the user explicitly confirms trust for this install. */
+  readonly rememberTrust?: ((entry: ExtensionCatalogBrowseEntry) => void) | undefined;
+}
+
+/**
+ * Resolve install options for UI actions.
+ *
+ * Approval is required when the install plan requests permissions. A trusted
+ * predicate may skip the prompt; otherwise the host confirm dialog runs and
+ * successful consent may be persisted via `rememberTrust`.
+ */
+export function resolveExtensionInstallOptions(
+  entry: ExtensionCatalogBrowseEntry,
+  confirmOrOptions: ((message: string) => boolean) | ResolveExtensionInstallOptionsInput = (
+    message,
+  ) => (typeof globalThis.confirm === 'function' ? globalThis.confirm(message) : false),
+): ExtensionInstallOptions | undefined {
+  if (!extensionInstallRequiresApproval(entry)) {
+    return {};
+  }
+
+  const options =
+    typeof confirmOrOptions === 'function' ? { confirm: confirmOrOptions } : confirmOrOptions;
+  const confirm =
+    options.confirm ??
+    ((message: string) =>
+      typeof globalThis.confirm === 'function' ? globalThis.confirm(message) : false);
+
+  const trusted =
+    typeof options.isTrusted === 'function' ? options.isTrusted(entry) : Boolean(options.isTrusted);
+  if (trusted) {
+    return { approved: true };
+  }
+
+  if (!confirm(formatExtensionInstallApprovalMessage(entry))) {
+    return undefined;
+  }
+
+  options.rememberTrust?.(entry);
+  return { approved: true };
+}

package/src/workbench/management/extension-management-filters.ts

@@ -0,0 +1,38 @@
+import type { ExtensionCatalogBrowseEntry, ExtensionManagementEntry } from './types.js';
+
+export function filterInstalledEntries(
+  entries: readonly ExtensionManagementEntry[],
+  query: string,
+): readonly ExtensionManagementEntry[] {
+  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),
+  );
+}
+
+export function filterBrowseEntries(
+  entries: readonly ExtensionCatalogBrowseEntry[],
+  query: string,
+  category?: string,
+): readonly ExtensionCatalogBrowseEntry[] {
+  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/index.ts

@@ -75,6 +75,13 @@ export type {
   WorkbenchNoticePosition,
   WorkbenchNoticeTone,
 } from './WorkbenchNotice.js';
+export { createWorkbenchNotify } from './createWorkbenchNotify.js';
+export type {
+  WorkbenchNotificationAction,
+  WorkbenchNotify,
+  WorkbenchNotifyOptions,
+} from './createWorkbenchNotify.js';
+export { useWorkbenchNotify } from './useWorkbenchNotify.js';
 export { KeybindingCaptureField } from './KeybindingCaptureField.js';
 export type { KeybindingCaptureFieldProps } from './KeybindingCaptureField.js';
 export { KeybindingManagementPanel } from './KeybindingManagementPanel.js';
@@ -112,6 +119,12 @@ export {
   extensionCategoryIconTone,
   formatExtensionCategoryLabel,
 } from './extension-category-display.js';
+export {
+  extensionInstallRequiresApproval,
+  formatExtensionInstallApprovalMessage,
+  resolveExtensionInstallOptions,
+  type ResolveExtensionInstallOptionsInput,
+} from './extension-install-approval.js';
 export type {
   AccountManagementEntry,
   AccountManagementEntryStatus,
@@ -122,6 +135,7 @@ export type {
   CommandManagementPanelProps,
   CommandManagementRunState,
   ExtensionCatalogBrowseEntry,
+  ExtensionInstallOptions,
   ExtensionManagementDiagnosticSummary,
   ExtensionManagementEntry,
   ExtensionManagementFeatureItem,

package/src/workbench/management/management.css

@@ -2,3 +2,31 @@
 @import './library-catalog-picker-dialog.css';
 @import './library-facet-filter-dialog.css';
 @import './management-panel.css';
+
+.ui-workbench-notify-message {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.ui-workbench-notify-message__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ui-workbench-notify-message__action {
+  margin: 0;
+  padding: 2px 8px;
+  border: 1px solid var(--color-border, currentColor);
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.ui-workbench-notify-message__action:hover {
+  background: var(--color-surface-hover, rgba(255, 255, 255, 0.08));
+}

package/src/workbench/management/types.ts

@@ -115,12 +115,25 @@ export interface ExtensionCatalogBrowseEntry {
   readonly manifestUrl: string;
 }
 
+export interface ExtensionInstallOptions {
+  /** Required when the install plan sets `requiresApproval`. */
+  readonly approved?: boolean | undefined;
+}
+
 export interface ExtensionManagementPanelProps {
   browseEntries: readonly ExtensionCatalogBrowseEntry[];
   catalogError?: string | undefined;
   catalogLoading?: boolean | undefined;
   className?: string | undefined;
   installedEntries: readonly ExtensionManagementEntry[];
-  onInstall?: ((entry: ExtensionCatalogBrowseEntry) => void) | undefined;
+  onInstall?:
+    ((entry: ExtensionCatalogBrowseEntry, options?: ExtensionInstallOptions) => void) | undefined;
   onToggleEnabled?: ((entry: ExtensionManagementEntry, enabled: boolean) => void) | undefined;
+  /**
+   * Host-owned durable trust check. When true for an entry, the install confirm
+   * prompt is skipped and `{ approved: true }` is used.
+   */
+  isInstallTrusted?: ((entry: ExtensionCatalogBrowseEntry) => boolean) | undefined;
+  /** Persist trust after the user confirms a permissioned install. */
+  onRememberInstallTrust?: ((entry: ExtensionCatalogBrowseEntry) => void) | undefined;
 }

package/src/workbench/management/useWorkbenchNotify.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+
+import { createWorkbenchNotify, type WorkbenchNotify } from './createWorkbenchNotify.js';
+import { useWorkbenchNotice } from './WorkbenchNotice.js';
+
+/** Convenience hook: NotificationService-shaped API inside a notice provider. */
+export function useWorkbenchNotify(): WorkbenchNotify {
+  const controller = useWorkbenchNotice();
+  return useMemo(() => createWorkbenchNotify(controller), [controller]);
+}

package/src/workbench/{MarkdownPreview.tsx → markdown/MarkdownPreview.tsx}

@@ -1,7 +1,11 @@
 import Markdown from 'react-markdown';
 import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { cx } from '../utils/cx';
-import { workbenchMarkdownRemarkPlugins } from './markdownRemarkPlugins';
+import { cx } from '../../utils/cx';
+import {
+  workbenchMarkdownRemarkPlugins,
+  workbenchMarkdownRehypePlugins,
+} from './markdownRemarkPlugins';
+import { sanitizeMarkdownHref } from './sanitizeMarkdownHref';
 
 export interface WorkbenchMarkdownPreviewProps extends ComponentPropsWithoutRef<'article'> {
   source: string;
@@ -16,12 +20,23 @@ export function WorkbenchMarkdownPreview({
     <article className={cx('ui-workbench-markdown-preview', className)} {...props}>
       <Markdown
         remarkPlugins={workbenchMarkdownRemarkPlugins}
+        rehypePlugins={workbenchMarkdownRehypePlugins}
         components={{
-          a: ({ children, href }) => (
-            <a href={href} rel="noreferrer" target={href?.startsWith('#') ? undefined : '_blank'}>
-              {children}
-            </a>
-          ),
+          a: ({ children, href }) => {
+            const safeHref = sanitizeMarkdownHref(href);
+            if (!safeHref) {
+              return <span>{children}</span>;
+            }
+            return (
+              <a
+                href={safeHref}
+                rel="noreferrer"
+                target={safeHref.startsWith('#') ? undefined : '_blank'}
+              >
+                {children}
+              </a>
+            );
+          },
           code: ({ children, className: codeClassName }) => (
             <code className={cx('ui-workbench-markdown-preview__code', codeClassName)}>
               {children}

package/src/workbench/markdown/markdownRemarkPlugins.ts

@@ -0,0 +1,12 @@
+import remarkGfm from 'remark-gfm';
+import rehypeSanitize from 'rehype-sanitize';
+
+/** Shared remark plugins for workbench markdown surfaces (preview, chat, etc.). */
+export const workbenchMarkdownRemarkPlugins = [remarkGfm];
+
+/**
+ * Default rehype pipeline for untrusted markdown (chat / preview).
+ * Strips script/event handlers and dangerous URLs via rehype-sanitize.
+ * Hosts that need raw HTML must render outside these kit surfaces.
+ */
+export const workbenchMarkdownRehypePlugins = [rehypeSanitize];

package/src/workbench/markdown/sanitizeMarkdownHref.ts

@@ -0,0 +1,29 @@
+/**
+ * Allowlist markdown link targets for safe preview rendering.
+ * Blocks javascript:/data:/vbscript: and other non-navigation schemes.
+ */
+export function sanitizeMarkdownHref(href: string | undefined): string | undefined {
+  if (href == null || href.trim() === '') {
+    return undefined;
+  }
+
+  const trimmed = href.trim();
+  if (trimmed.startsWith('#')) {
+    return trimmed;
+  }
+
+  try {
+    const base =
+      typeof globalThis.location?.href === 'string' && globalThis.location.href.length > 0
+        ? globalThis.location.href
+        : 'https://workbench.local/';
+    const url = new URL(trimmed, base);
+    const protocol = url.protocol.toLowerCase();
+    if (protocol === 'http:' || protocol === 'https:' || protocol === 'mailto:') {
+      return trimmed;
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}

package/src/workbench/settings/StructuredDataForm.tsx

@@ -37,6 +37,7 @@ import {
   type WorkbenchStructuredDataSchemaFieldInputProps,
   type WorkbenchStructuredDataTextArrayInputProps,
 } from './structuredDataSchema';
+import { isRenderableWorkbenchStructuredDataFormError } from './structuredDataFormModel';
 
 export function WorkbenchStructuredDataForm({
   ariaLabel,
@@ -156,10 +157,6 @@ export function WorkbenchStructuredDataForm({
   );
 }
 
-function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
-  return error !== undefined && error !== null && error !== false && error !== '';
-}
-
 function StructuredDataSection({
   data,
   disabled,

package/src/workbench/settings/structuredDataFormModel.ts

@@ -135,6 +135,7 @@ function isWorkbenchStructuredDataFormEmptyValue(value: WorkbenchStructuredDataF
   return value === '' || value === false;
 }
 
-function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
+/** True when a form field error should render (non-empty ReactNode). */
+export function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
   return error !== undefined && error !== null && error !== false && error !== '';
 }

package/src/workbench/{ActivityBar.tsx → shell/ActivityBar.tsx}

@@ -1,7 +1,7 @@
-import './shell/activity-bar.css';
+import './activity-bar.css';
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { Button } from '../primitives/button';
-import { cx } from '../utils/cx';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
 import { type ActivityBarOrientation } from './activityBarOrder';
 import {
   mergeWorkbenchSidebarViewPlacementDropZoneProps,
@@ -20,18 +20,18 @@ export interface ActivityBarItem {
 }
 
 export interface ActivityBarProps extends Omit<ComponentPropsWithoutRef<'nav'>, 'children'> {
-  acceptSidebarViewPlacementDrop?: ((viewId: string) => boolean) | undefined;
+  acceptSidebarViewPlacementDrop?: (viewId: string) => boolean;
   itemDataAttributeName?: string;
   items: ActivityBarItem[];
   onItemActivate?: (item: ActivityBarItem) => void;
   onItemsReorder?: (itemIds: string[]) => void;
-  onSidebarViewPlacementDrop?: ((viewId: string) => void) | undefined;
-  orientation?: ActivityBarOrientation | undefined;
+  onSidebarViewPlacementDrop?: (viewId: string) => void;
+  orientation?: ActivityBarOrientation;
   reorderable?: boolean;
   secondaryItems?: ActivityBarItem[];
-  sidebarViewPlacementDropZoneId?: string | undefined;
+  sidebarViewPlacementDropZoneId?: string;
   /** Enables cross-slot placement drag without reordering within the bar. */
-  placementDraggable?: boolean | undefined;
+  placementDraggable?: boolean;
 }
 
 /** @deprecated Use WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE */

package/src/workbench/{ArtifactShell.tsx → shell/ArtifactShell.tsx}

@@ -1,8 +1,8 @@
 import { useState, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { EmptyState } from '../primitives/empty-state';
-import { IconButton } from '../primitives/icon-button';
-import { cx } from '../utils/cx';
-import { WorkspacePathLabel } from './workspace/WorkspacePathLabel';
+import { EmptyState } from '../../primitives/empty-state';
+import { IconButton } from '../../primitives/icon-button';
+import { cx } from '../../utils/cx';
+import { WorkspacePathLabel } from '../workspace/WorkspacePathLabel';
 import { SplitView } from './SplitView';
 
 export type WorkbenchArtifactMode = 'code' | 'preview' | 'split';
@@ -31,8 +31,8 @@ export interface WorkbenchPreviewRendererMatch {
 
 export interface WorkbenchPreviewRendererContext {
   artifact: WorkbenchArtifactDescriptor;
-  match?: WorkbenchPreviewRendererMatch | undefined;
-  renderer?: WorkbenchPreviewRenderer | undefined;
+  match?: WorkbenchPreviewRendererMatch;
+  renderer?: WorkbenchPreviewRenderer;
 }
 
 export interface WorkbenchPreviewRenderer {
@@ -58,11 +58,11 @@ export type WorkbenchArtifactShellRenderPreview = (
 ) => ReactNode;
 
 export interface WorkbenchArtifactModeControlsProps extends ComponentPropsWithRef<'div'> {
-  codeLabel?: string | undefined;
+  codeLabel?: string;
   mode: WorkbenchArtifactMode;
   onModeChange: (mode: WorkbenchArtifactMode) => void;
-  previewLabel?: string | undefined;
-  splitLabel?: string | undefined;
+  previewLabel?: string;
+  splitLabel?: string;
 }
 
 function normalizeToken(value: string | undefined) {
@@ -229,9 +229,9 @@ export function WorkbenchArtifactModeControls({
 
 export interface WorkbenchArtifactPreviewProps extends ComponentPropsWithRef<'div'> {
   artifact: WorkbenchArtifactDescriptor;
-  renderPreview?: WorkbenchArtifactShellRenderPreview | undefined;
-  renderers?: readonly WorkbenchPreviewRenderer[] | undefined;
-  unsupportedLabel?: ReactNode | undefined;
+  renderPreview?: WorkbenchArtifactShellRenderPreview;
+  renderers?: readonly WorkbenchPreviewRenderer[];
+  unsupportedLabel?: ReactNode;
 }
 
 export function WorkbenchArtifactPreview({
@@ -270,19 +270,19 @@ export interface WorkbenchArtifactShellProps extends Omit<
   ComponentPropsWithRef<'div'>,
   'children'
 > {
-  artifact?: WorkbenchArtifactDescriptor | undefined;
-  codeLabel?: string | undefined;
-  defaultMode?: WorkbenchArtifactMode | undefined;
-  emptyLabel?: ReactNode | undefined;
-  mode?: WorkbenchArtifactMode | undefined;
-  onModeChange?: ((mode: WorkbenchArtifactMode) => void) | undefined;
-  previewLabel?: string | undefined;
-  previewRenderers?: readonly WorkbenchPreviewRenderer[] | undefined;
-  renderCode?: WorkbenchArtifactShellRenderCode | undefined;
-  renderPreview?: WorkbenchArtifactShellRenderPreview | undefined;
-  showHeader?: boolean | undefined;
-  splitLabel?: string | undefined;
-  unsupportedPreviewLabel?: ReactNode | undefined;
+  artifact?: WorkbenchArtifactDescriptor;
+  codeLabel?: string;
+  defaultMode?: WorkbenchArtifactMode;
+  emptyLabel?: ReactNode;
+  mode?: WorkbenchArtifactMode;
+  onModeChange?: (mode: WorkbenchArtifactMode) => void;
+  previewLabel?: string;
+  previewRenderers?: readonly WorkbenchPreviewRenderer[];
+  renderCode?: WorkbenchArtifactShellRenderCode;
+  renderPreview?: WorkbenchArtifactShellRenderPreview;
+  showHeader?: boolean;
+  splitLabel?: string;
+  unsupportedPreviewLabel?: ReactNode;
 }
 
 export function WorkbenchArtifactShell({

package/src/workbench/{SplitView.tsx → shell/SplitView.tsx}

@@ -1,4 +1,4 @@
-import './shell/split-view.css';
+import './split-view.css';
 import {
   useEffect,
   useLayoutEffect,
@@ -9,7 +9,7 @@ import {
   type PointerEvent,
   type ReactNode,
 } from 'react';
-import { cx } from '../utils/cx';
+import { cx } from '../../utils/cx';
 
 export type SplitViewOrientation = 'horizontal' | 'vertical';
 export type SplitViewPrimarySizeUnit = 'percent' | 'pixels';
@@ -42,7 +42,7 @@ export interface SplitViewProps {
   onPrimarySizePxPreviewChange?: (primarySizePx: number) => void;
   onSecondarySizePxChange?: (secondarySizePx: number) => void;
   onSecondarySizePxPreviewChange?: (secondarySizePx: number) => void;
-  orientation?: SplitViewOrientation | undefined;
+  orientation?: SplitViewOrientation;
   primary: ReactNode;
   primarySizePercent?: number;
   primarySizePx?: number;