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

package/src/workbench/WorkbenchViewEditor.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react';
+
+import {
+  WorkbenchEditorBody,
+  WorkbenchEditorFrame,
+  WorkbenchPanelSurface,
+  type WorkbenchEditorBodyProps,
+  type WorkbenchEditorFrameProps,
+  type WorkbenchPanelSurfaceProps,
+} from '../layout/WorkbenchLayoutBase';
+import { EmptyState, type EmptyStateProps } from '../primitives/empty-state';
+
+export type WorkbenchViewEditorDataAttributes = {
+  readonly [key: `data-${string}`]: boolean | number | string | undefined;
+};
+
+export type WorkbenchViewEditorEmptyStateProps = Omit<EmptyStateProps, 'children' | 'icon'> &
+  WorkbenchViewEditorDataAttributes;
+
+export type WorkbenchViewEditorEmptyStateSurfaceProps = Omit<
+  WorkbenchPanelSurfaceProps,
+  'children'
+> &
+  WorkbenchViewEditorDataAttributes;
+
+export interface WorkbenchViewEditorEmptyState {
+  readonly children: ReactNode;
+  readonly icon: EmptyStateProps['icon'];
+  readonly props?: WorkbenchViewEditorEmptyStateProps | undefined;
+  readonly surfaceProps?: WorkbenchViewEditorEmptyStateSurfaceProps | undefined;
+}
+
+export interface WorkbenchViewEditorProps extends Omit<WorkbenchEditorFrameProps, 'children'> {
+  readonly bodyProps?: Omit<WorkbenchEditorBodyProps, 'children'> | undefined;
+  readonly children?: ReactNode;
+  readonly emptyState?: WorkbenchViewEditorEmptyState | undefined;
+  readonly tabs?: ReactNode | undefined;
+}
+
+export function WorkbenchViewEditor({
+  bodyProps,
+  children,
+  emptyState,
+  tabs,
+  ...frameProps
+}: WorkbenchViewEditorProps) {
+  const bodyContent =
+    children !== undefined
+      ? children
+      : emptyState === undefined
+        ? null
+        : renderWorkbenchViewEditorEmptyState(emptyState);
+
+  return (
+    <WorkbenchEditorFrame {...frameProps}>
+      {tabs}
+      <WorkbenchEditorBody {...bodyProps}>{bodyContent}</WorkbenchEditorBody>
+    </WorkbenchEditorFrame>
+  );
+}
+
+function renderWorkbenchViewEditorEmptyState({
+  children,
+  icon,
+  props,
+  surfaceProps,
+}: WorkbenchViewEditorEmptyState) {
+  return (
+    <WorkbenchPanelSurface {...surfaceProps}>
+      <EmptyState icon={icon} {...props}>
+        {children}
+      </EmptyState>
+    </WorkbenchPanelSurface>
+  );
+}

package/src/workbench/WorkbenchViewSidebar.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+
+import {
+  SideBarList,
+  SideBarListItem,
+  SideBarViewFrame,
+  type SideBarListProps,
+  type SideBarViewFrameProps,
+} from '../layout/sidebar';
+import { cx } from '../utils/cx';
+
+export interface WorkbenchViewSidebarItem<TViewId extends string, TIcon = unknown> {
+  readonly disabled?: boolean | undefined;
+  readonly icon: TIcon;
+  readonly id: TViewId;
+  readonly label: string;
+  readonly title?: string | undefined;
+}
+
+export interface WorkbenchViewSidebarProps<TViewId extends string, TIcon = unknown> extends Omit<
+  SideBarViewFrameProps,
+  'children' | 'onSelect'
+> {
+  readonly [key: `data-${string}`]: boolean | number | string | undefined;
+  readonly activeId?: TViewId | undefined;
+  readonly itemDataAttributeName?: string | undefined;
+  readonly items: ReadonlyArray<WorkbenchViewSidebarItem<TViewId, TIcon>>;
+  readonly listProps?: Omit<SideBarListProps, 'children'> | undefined;
+  readonly onSelect?:
+    ((viewId: TViewId, item: WorkbenchViewSidebarItem<TViewId, TIcon>) => void) | undefined;
+  readonly renderIcon: (icon: TIcon, item: WorkbenchViewSidebarItem<TViewId, TIcon>) => ReactNode;
+}
+
+export function WorkbenchViewSidebar<TViewId extends string, TIcon = unknown>({
+  activeId,
+  className,
+  itemDataAttributeName,
+  items,
+  listProps,
+  onSelect,
+  renderIcon,
+  ...frameProps
+}: WorkbenchViewSidebarProps<TViewId, TIcon>) {
+  const { className: listClassName, fill = true, ...restListProps } = listProps ?? {};
+
+  return (
+    <SideBarViewFrame
+      className={cx('ui-workbench-view-sidebar', 'workbench-primary-sidebar', className)}
+      {...frameProps}
+    >
+      <SideBarList
+        className={cx('ui-workbench-view-sidebar__list', listClassName)}
+        fill={fill}
+        {...restListProps}
+      >
+        {items.map((item) => {
+          const selected = item.id === activeId;
+          const itemDataProps =
+            itemDataAttributeName === undefined
+              ? undefined
+              : ({ [itemDataAttributeName]: item.id } as Record<string, string>);
+
+          return (
+            <SideBarListItem
+              key={item.id}
+              active={selected}
+              disabled={item.disabled}
+              onClick={onSelect === undefined ? undefined : () => onSelect(item.id, item)}
+              selected={selected}
+              title={item.title ?? item.label}
+              {...itemDataProps}
+            >
+              <span className="ui-workbench-view-sidebar__item-content">
+                <span className="ui-workbench-view-sidebar__item-icon">
+                  {renderIcon(item.icon, item)}
+                </span>
+                <span className="ui-workbench-view-sidebar__item-label">{item.label}</span>
+              </span>
+            </SideBarListItem>
+          );
+        })}
+      </SideBarList>
+    </SideBarViewFrame>
+  );
+}

package/src/workbench/WorkbenchWindowChromeControls.tsx

@@ -0,0 +1,290 @@
+import type { ReactNode } from 'react';
+
+import { cx } from '../utils/cx';
+import { useWorkbenchHostPlatform } from './WorkbenchPlatformContext';
+import type { WorkbenchHostPlatform, WorkbenchWindowChromeMode } from './workbenchPlatformChrome';
+
+export interface WorkbenchWindowChromeControlsProps {
+  chrome?: WorkbenchWindowChromeMode | undefined;
+  closeLabel?: string | undefined;
+  isMaximized?: boolean | undefined;
+  maximizeLabel?: string | undefined;
+  minimizeLabel?: string | undefined;
+  onClose: () => void;
+  onMinimize?: (() => void) | undefined;
+  onToggleMaximized?: (() => void) | undefined;
+  restoreLabel?: string | undefined;
+  showMaximize?: boolean | undefined;
+  showMinimize?: boolean | undefined;
+  surface: 'desktop-titlebar' | 'modal';
+}
+
+export function WorkbenchWindowChromeControls({
+  chrome = 'platform',
+  closeLabel = 'Close',
+  isMaximized = false,
+  maximizeLabel = 'Maximize',
+  minimizeLabel = 'Minimize',
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel = 'Restore',
+  showMaximize = true,
+  showMinimize = true,
+  surface,
+}: WorkbenchWindowChromeControlsProps): ReactNode {
+  const platform = useWorkbenchHostPlatform();
+
+  if (chrome !== 'platform') {
+    return renderGenericControls({
+      closeLabel,
+      isMaximized,
+      maximizeLabel,
+      minimizeLabel,
+      onClose,
+      onMinimize,
+      onToggleMaximized,
+      restoreLabel,
+      showMaximize,
+      showMinimize,
+      surface,
+    });
+  }
+
+  if (platform === 'darwin') {
+    return renderDarwinControls({
+      closeLabel,
+      isMaximized,
+      maximizeLabel,
+      minimizeLabel,
+      onClose,
+      onMinimize,
+      onToggleMaximized,
+      restoreLabel,
+      showMaximize,
+      showMinimize,
+      surface,
+    });
+  }
+
+  return renderWindowsControls({
+    closeLabel,
+    isMaximized,
+    maximizeLabel,
+    minimizeLabel,
+    onClose,
+    onMinimize,
+    onToggleMaximized,
+    restoreLabel,
+    showMaximize,
+    showMinimize,
+    surface,
+  });
+}
+
+interface SharedControlProps {
+  closeLabel: string;
+  isMaximized: boolean;
+  maximizeLabel: string;
+  minimizeLabel: string;
+  onClose: () => void;
+  onMinimize?: (() => void) | undefined;
+  onToggleMaximized?: (() => void) | undefined;
+  restoreLabel: string;
+  showMaximize: boolean;
+  showMinimize: boolean;
+  surface: 'desktop-titlebar' | 'modal';
+}
+
+function renderDarwinControls({
+  closeLabel,
+  isMaximized,
+  maximizeLabel,
+  minimizeLabel,
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel,
+  showMaximize,
+  showMinimize,
+  surface,
+}: SharedControlProps): ReactNode {
+  const maximizeTitle = isMaximized ? restoreLabel : maximizeLabel;
+
+  return (
+    <div
+      className={cx(
+        'ui-workbench-window-chrome-controls',
+        'ui-workbench-window-chrome-controls--darwin',
+        surface === 'modal' && 'ui-workbench-window-chrome-controls--modal',
+      )}
+    >
+      <button
+        aria-label={closeLabel}
+        className="ui-workbench-window-chrome-control ui-workbench-window-chrome-control--darwin ui-workbench-window-chrome-control--close"
+        title={closeLabel}
+        type="button"
+        onClick={onClose}
+      >
+        <span aria-hidden="true" className="ui-workbench-window-chrome-control__glyph" />
+      </button>
+      {showMinimize && onMinimize ? (
+        <button
+          aria-label={minimizeLabel}
+          className="ui-workbench-window-chrome-control ui-workbench-window-chrome-control--darwin ui-workbench-window-chrome-control--minimize"
+          title={minimizeLabel}
+          type="button"
+          onClick={onMinimize}
+        >
+          <span aria-hidden="true" className="ui-workbench-window-chrome-control__glyph" />
+        </button>
+      ) : null}
+      {showMaximize && onToggleMaximized ? (
+        <button
+          aria-label={maximizeTitle}
+          className="ui-workbench-window-chrome-control ui-workbench-window-chrome-control--darwin ui-workbench-window-chrome-control--zoom"
+          title={maximizeTitle}
+          type="button"
+          onClick={onToggleMaximized}
+        >
+          <span aria-hidden="true" className="ui-workbench-window-chrome-control__glyph" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function renderWindowsControls({
+  closeLabel,
+  isMaximized,
+  maximizeLabel,
+  minimizeLabel,
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel,
+  showMaximize,
+  showMinimize,
+  surface,
+}: SharedControlProps): ReactNode {
+  const maximizeTitle = isMaximized ? restoreLabel : maximizeLabel;
+  const controlClassName =
+    surface === 'modal'
+      ? 'ui-modal__control ui-workbench-window-chrome-control--win32'
+      : 'ui-workbench-desktop-titlebar__control ui-workbench-window-chrome-control--win32';
+  const closeClassName =
+    surface === 'modal'
+      ? cx(controlClassName, 'ui-modal__close')
+      : cx(controlClassName, 'ui-workbench-desktop-titlebar__control--close');
+  const containerClassName =
+    surface === 'modal'
+      ? 'ui-modal__controls ui-workbench-window-chrome-controls ui-workbench-window-chrome-controls--win32'
+      : 'ui-workbench-desktop-titlebar__controls ui-workbench-window-chrome-controls ui-workbench-window-chrome-controls--win32';
+
+  return (
+    <div className={containerClassName}>
+      {showMinimize && onMinimize ? (
+        <button
+          aria-label={minimizeLabel}
+          className={controlClassName}
+          title={minimizeLabel}
+          type="button"
+          onClick={onMinimize}
+        >
+          <i aria-hidden="true" className="codicon codicon-chrome-minimize" />
+        </button>
+      ) : null}
+      {showMaximize && onToggleMaximized ? (
+        <button
+          aria-label={maximizeTitle}
+          className={controlClassName}
+          title={maximizeTitle}
+          type="button"
+          onClick={onToggleMaximized}
+        >
+          <i
+            aria-hidden="true"
+            className={cx(
+              'codicon',
+              isMaximized ? 'codicon-chrome-restore' : 'codicon-chrome-maximize',
+            )}
+          />
+        </button>
+      ) : null}
+      <button
+        aria-label={closeLabel}
+        className={closeClassName}
+        title={closeLabel}
+        type="button"
+        onClick={onClose}
+      >
+        <i
+          aria-hidden="true"
+          className={cx('codicon', surface === 'modal' ? 'codicon-close' : 'codicon-chrome-close')}
+        />
+      </button>
+    </div>
+  );
+}
+
+function renderGenericControls({
+  closeLabel,
+  isMaximized,
+  maximizeLabel,
+  onClose,
+  onToggleMaximized,
+  restoreLabel,
+  showMaximize,
+  surface,
+}: SharedControlProps): ReactNode {
+  const maximizeTitle = isMaximized ? restoreLabel : maximizeLabel;
+  const controlClassName =
+    surface === 'modal' ? 'ui-modal__control' : 'ui-workbench-desktop-titlebar__control';
+  const closeClassName =
+    surface === 'modal'
+      ? cx(controlClassName, 'ui-modal__close')
+      : cx(controlClassName, 'ui-workbench-desktop-titlebar__control--close');
+  const containerClassName =
+    surface === 'modal' ? 'ui-modal__controls' : 'ui-workbench-desktop-titlebar__controls';
+
+  return (
+    <div className={containerClassName}>
+      {showMaximize && onToggleMaximized ? (
+        <button
+          aria-label={maximizeTitle}
+          className={controlClassName}
+          title={maximizeTitle}
+          type="button"
+          onClick={onToggleMaximized}
+        >
+          <i
+            aria-hidden="true"
+            className={cx(
+              'codicon',
+              isMaximized ? 'codicon-chrome-restore' : 'codicon-chrome-maximize',
+            )}
+          />
+        </button>
+      ) : null}
+      <button
+        aria-label={closeLabel}
+        className={closeClassName}
+        title={closeLabel}
+        type="button"
+        onClick={onClose}
+      >
+        <i
+          aria-hidden="true"
+          className={cx('codicon', surface === 'modal' ? 'codicon-close' : 'codicon-chrome-close')}
+        />
+      </button>
+    </div>
+  );
+}
+
+export function shouldUseDarwinPlatformChrome(
+  chrome: WorkbenchWindowChromeMode,
+  platform: WorkbenchHostPlatform,
+): boolean {
+  return chrome === 'platform' && platform === 'darwin';
+}

package/src/workbench/activityBarOrder.ts

@@ -0,0 +1,98 @@
+export const DEFAULT_ACTIVITY_BAR_ITEM_ORDER = [
+  'explorer',
+  'search',
+  'chatting',
+  'aiChat',
+] as const;
+
+export type ActivityBarDropPosition = 'after' | 'before';
+
+export function reorderActivityBarItems(
+  itemIds: readonly string[],
+  sourceId: string,
+  targetId: string,
+  position: ActivityBarDropPosition,
+): readonly string[] | undefined {
+  if (sourceId === targetId) {
+    return undefined;
+  }
+
+  const sourceIndex = itemIds.indexOf(sourceId);
+  const targetIndex = itemIds.indexOf(targetId);
+  if (sourceIndex < 0 || targetIndex < 0) {
+    return undefined;
+  }
+
+  let insertIndex = position === 'before' ? targetIndex : targetIndex + 1;
+  const nextItemIds = [...itemIds];
+  nextItemIds.splice(sourceIndex, 1);
+
+  if (sourceIndex < insertIndex) {
+    insertIndex -= 1;
+  }
+
+  if (insertIndex === sourceIndex) {
+    return undefined;
+  }
+
+  nextItemIds.splice(insertIndex, 0, sourceId);
+  return nextItemIds;
+}
+
+export type ActivityBarOrientation = 'horizontal' | 'vertical';
+
+export function getActivityBarDropPosition(
+  target: HTMLElement,
+  pointerPosition: number,
+  orientation: ActivityBarOrientation = 'vertical',
+): ActivityBarDropPosition {
+  const rect = target.getBoundingClientRect();
+
+  if (orientation === 'horizontal') {
+    if (rect.width <= 0) {
+      return 'after';
+    }
+
+    return pointerPosition < rect.left + rect.width / 2 ? 'before' : 'after';
+  }
+
+  if (rect.height <= 0) {
+    return 'after';
+  }
+
+  return pointerPosition < rect.top + rect.height / 2 ? 'before' : 'after';
+}
+
+export function sortActivityBarItems<T extends { id: string }>(
+  items: readonly T[],
+  itemOrder?: readonly string[] | undefined,
+  fallbackOrder: readonly string[] = DEFAULT_ACTIVITY_BAR_ITEM_ORDER,
+): T[] {
+  const order = itemOrder?.length ? itemOrder : fallbackOrder;
+  const orderIndex = new Map(order.map((id, index) => [id, index]));
+
+  return [...items].sort((left, right) => {
+    const leftIndex = orderIndex.get(left.id);
+    const rightIndex = orderIndex.get(right.id);
+
+    if (leftIndex === undefined && rightIndex === undefined) {
+      return left.id.localeCompare(right.id);
+    }
+
+    if (leftIndex === undefined) return 1;
+    if (rightIndex === undefined) return -1;
+    return leftIndex - rightIndex;
+  });
+}
+
+export function filterActivityBarItems<T extends { id: string }>(
+  items: readonly T[],
+  hiddenItemIds?: readonly string[] | undefined,
+): T[] {
+  if (!hiddenItemIds?.length) {
+    return [...items];
+  }
+
+  const hiddenItems = new Set(hiddenItemIds);
+  return items.filter((item) => !hiddenItems.has(item.id));
+}

package/src/workbench/appearanceLabels.ts

@@ -0,0 +1,28 @@
+/**
+ * Appearance settings copy aligned with VS Code Settings › Appearance terminology.
+ *
+ * VS Code maps:
+ * - color scheme preference → `window.autoDetectColorScheme` + forced light/dark
+ * - light/dark color presets → `workbench.preferredLightColorTheme` / `workbench.preferredDarkColorTheme`
+ * - workbench layout preset → no first-class VS Code preset (scattered workbench/editor settings);
+ *   workbench-kit groups metric tokens under `data-shell-preset` / `shellPreset`.
+ *
+ * Code identifiers (`themePreset`, `shellPreset`) stay stable; use these labels in UI only.
+ */
+export const WORKBENCH_APPEARANCE_FIELD_LABELS = {
+  colorScheme: 'Color scheme',
+  preferredLightColorTheme: 'Preferred Light Color Theme',
+  preferredDarkColorTheme: 'Preferred Dark Color Theme',
+  workbenchLayout: 'Workbench Layout',
+} as const;
+
+export const WORKBENCH_APPEARANCE_FIELD_DESCRIPTIONS = {
+  colorScheme:
+    'Match VS Code auto-detect: System follows the OS color scheme; Light and Dark force a mode.',
+  preferredLightColorTheme:
+    'Workbench color theme when resolved to light mode (VS Code: workbench.preferredLightColorTheme).',
+  preferredDarkColorTheme:
+    'Workbench color theme when resolved to dark mode (VS Code: workbench.preferredDarkColorTheme).',
+  workbenchLayout:
+    'Header height, control radius, spacing, and status bar density. Orthogonal to Color Theme; combine freely.',
+} as const;

package/src/workbench/auth/WorkbenchLoginView.tsx

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