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

package/src/primitives/tabbed-panels/TabbedPanels.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import './tabbed-panels.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+
+export interface TabbedPanelItem {
+  id: string;
+  label: ReactNode;
+  panel: ReactNode;
+}
+
+export interface TabbedPanelsProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
+  activeId?: string;
+  ariaLabel?: string;
+  items: readonly TabbedPanelItem[];
+  onSelect?: (id: string) => void;
+}
+
+export function TabbedPanels({
+  activeId,
+  ariaLabel,
+  className,
+  items,
+  onSelect,
+  ...props
+}: TabbedPanelsProps) {
+  const [internalActiveId, setInternalActiveId] = useState<string | null>(null);
+  const selectedId = activeId ?? internalActiveId ?? items[0]?.id;
+  const activeItem = items.find((item) => item.id === selectedId) ?? items[0];
+
+  return (
+    <div className={cx('ui-tabbed-panels', className)} {...props}>
+      <div
+        aria-label={ariaLabel ?? props['aria-label'] ?? 'Panels'}
+        className="ui-tabbed-panels__tabs"
+        role="tablist"
+      >
+        {items.map((item) => {
+          const selected = item.id === activeItem?.id;
+          return (
+            <button
+              key={item.id}
+              aria-selected={selected}
+              className={cx('ui-tabbed-panels__tab', selected && 'ui-tabbed-panels__tab--active')}
+              id={`${item.id}:tab`}
+              onClick={() => {
+                setInternalActiveId(item.id);
+                onSelect?.(item.id);
+              }}
+              role="tab"
+              type="button"
+            >
+              <span className="ui-tabbed-panels__tab-label">{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+      <div
+        aria-labelledby={activeItem ? `${activeItem.id}:tab` : undefined}
+        className="ui-tabbed-panels__panel"
+        id={activeItem ? `${activeItem.id}:view` : undefined}
+        role="tabpanel"
+      >
+        {activeItem?.panel}
+      </div>
+    </div>
+  );
+}

package/src/primitives/tabbed-panels/index.ts

@@ -0,0 +1,2 @@
+export { TabbedPanels } from './TabbedPanels';
+export type { TabbedPanelItem, TabbedPanelsProps } from './TabbedPanels';

package/src/primitives/tabbed-panels/tabbed-panels.css

@@ -0,0 +1,58 @@
+.ui-tabbed-panels {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.ui-tabbed-panels__tabs {
+  display: flex;
+  flex: 0 0 35px;
+  align-items: end;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--vscode-editorGroupHeader-tabsBackground, var(--color-editor-tab-strip-bg));
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-tabbed-panels__tab {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  max-width: 180px;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
+  background: var(--vscode-tab-inactiveBackground, var(--color-editor-tab-inactive-bg));
+  border: 0;
+  border-right: 1px solid var(--vscode-tab-border, var(--color-border));
+  font: inherit;
+  cursor: pointer;
+}
+
+.ui-tabbed-panels__tab--active {
+  color: var(--vscode-tab-activeForeground, var(--color-text));
+  background: var(--vscode-tab-activeBackground, var(--color-editor-tab-active-bg));
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--vscode-tab-activeBackground, var(--color-editor-tab-active-bg));
+  z-index: 1;
+}
+
+.ui-tabbed-panels__tab-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-tabbed-panels__panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}

package/src/primitives/{TextArea.tsx → text-area/TextArea.tsx}

@@ -1,5 +1,6 @@
+import '../text-input/input.css';
 import type { ComponentPropsWithRef, CSSProperties } from 'react';
-import { cx } from '../utils/cx';
+import { cx } from '../../utils/cx';
 
 type ControlWidth = 'default' | 'wide' | 'full';
 

package/src/primitives/text-area/index.ts

@@ -0,0 +1 @@
+export * from './TextArea';

package/src/primitives/{TextInput.tsx → text-input/TextInput.tsx}

@@ -1,5 +1,6 @@
+import './input.css';
 import type { ChangeEvent, ComponentPropsWithRef } from 'react';
-import { cx } from '../utils/cx';
+import { cx } from '../../utils/cx';
 
 export type ControlWidth = 'default' | 'wide' | 'full';
 

package/src/primitives/text-input/index.ts

@@ -0,0 +1 @@
+export * from './TextInput';

package/src/primitives/text-input/input.css

@@ -0,0 +1,54 @@
+.ui-input {
+  height: var(--ui-input-height, var(--ui-input-height-default));
+  padding: var(--ui-input-padding, 0 var(--ui-input-padding-x));
+}
+
+.ui-textarea {
+  min-height: var(--ui-textarea-min-height, 80px);
+  max-height: var(--ui-textarea-max-height, none);
+  display: var(--ui-textarea-display, initial);
+  margin: var(--ui-textarea-margin, 0);
+  padding: var(--ui-textarea-padding, 8px);
+  overflow-y: var(--ui-textarea-overflow-y, auto);
+  line-height: var(--ui-input-line-height, 1.5);
+  resize: var(--ui-textarea-resize, vertical);
+}
+
+.ui-input[data-width='wide'],
+.ui-textarea[data-width='wide'] {
+  width: 420px;
+}
+
+.ui-input[data-width='full'],
+.ui-textarea[data-width='full'] {
+  width: 100%;
+}
+
+.ui-input[type='range'] {
+  padding: 0;
+  background: transparent;
+  border-color: transparent;
+  accent-color: var(--color-accent);
+}
+
+.ui-input[type='range']:focus {
+  border-color: transparent;
+  outline: 1px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.ui-input--monospace {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+}
+
+/* Prefer NumberInput themed steppers; hide native spinners on raw type=number too. */
+.ui-input[type='number'] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.ui-input[type='number']::-webkit-outer-spin-button,
+.ui-input[type='number']::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}

package/src/primitives/{Toolbar.tsx → toolbar/Toolbar.tsx}

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef } from 'react';
-import { cx } from '../utils/cx';
+import { cx } from '../../utils/cx';
 
 export type ToolbarProps = ComponentPropsWithRef<'div'>;
 

package/src/primitives/toolbar/index.ts

@@ -0,0 +1 @@
+export * from './Toolbar';

package/src/primitives/visually-hidden/visually-hidden.css

@@ -0,0 +1,11 @@
+.ui-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/primitives/{WorkbenchEditor.tsx → workbench-editor/WorkbenchEditor.tsx}

@@ -1,4 +1,8 @@
 import { useRef, useState } from 'react';
+import './button-group.css';
+import './editor-tabs.css';
+import './resizable-panels.css';
+import './segmented-control.css';
 import type {
   CSSProperties,
   ComponentPropsWithRef,
@@ -8,9 +12,12 @@ import type {
   PointerEvent as ReactPointerEvent,
   ReactNode,
 } from 'react';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
-import { IconButton } from './IconButton';
+import type { FileIconKind } from '../../icons/file-icon';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+import { FileIcon } from '../file-icon';
+import { IconButton } from '../icon-button';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
 
 export interface ButtonGroupProps extends ComponentPropsWithRef<'div'> {
   ariaLabel?: string | undefined;
@@ -28,6 +35,9 @@ export function ButtonGroup({ ariaLabel, className, role = 'group', ...props }:
 }
 
 export interface SegmentedControlOption<TValue extends string = string> {
+  /** Accessible name when `label` is icon-only or otherwise non-textual. */
+  ariaLabel?: string | undefined;
+  disabled?: boolean | undefined;
   label: ReactNode;
   testId?: string | undefined;
   value: TValue;
@@ -35,6 +45,10 @@ export interface SegmentedControlOption<TValue extends string = string> {
 
 export interface SegmentedControlProps<TValue extends string = string> {
   ariaLabel?: string | undefined;
+  className?: string | undefined;
+  /** Match `Button` / toolbar compact density. */
+  compact?: boolean | undefined;
+  disabled?: boolean | undefined;
   onChange: (value: TValue) => void;
   options: readonly SegmentedControlOption<TValue>[];
   value: TValue;
@@ -42,24 +56,36 @@ export interface SegmentedControlProps<TValue extends string = string> {
 
 export function SegmentedControl<TValue extends string = string>({
   ariaLabel,
+  className,
+  compact = false,
+  disabled = false,
   onChange,
   options,
   value,
 }: SegmentedControlProps<TValue>) {
   return (
-    <ButtonGroup ariaLabel={ariaLabel}>
+    <ButtonGroup
+      ariaLabel={ariaLabel}
+      className={cx('ui-segmented-control', compact && 'ui-segmented-control--compact', className)}
+    >
       {options.map((option) => {
         const selected = option.value === value;
+        const optionDisabled = disabled || option.disabled === true;
         return (
           <button
             key={option.value}
+            aria-label={option.ariaLabel}
             aria-pressed={selected}
             className={cx(
               'ui-segmented-control__item',
               selected && 'ui-segmented-control__item--selected',
             )}
             data-testid={option.testId}
-            onClick={() => onChange(option.value)}
+            disabled={optionDisabled}
+            onClick={() => {
+              if (optionDisabled || selected) return;
+              onChange(option.value);
+            }}
             type="button"
           >
             {option.label}
@@ -74,9 +100,14 @@ export interface EditorTab {
   closable?: boolean | undefined;
   dirty?: boolean | undefined;
   dropPosition?: EditorTabDropPosition | undefined;
+  /** File-type token for themed icon coloring (see `@workbench-kit/tokens` `--file-icon-*`). */
+  fileIconKind?: FileIconKind | undefined;
   icon?: string | undefined;
+  /** Remote image URL for tab icon (e.g. game library artwork). Takes precedence over `icon`. */
+  iconImageUrl?: string | null | undefined;
   id: string;
   label: ReactNode;
+  missing?: boolean | undefined;
   pinned?: boolean | undefined;
   preview?: boolean | undefined;
   title?: string | undefined;
@@ -84,13 +115,46 @@ export interface EditorTab {
 
 export type EditorTabDropPosition = 'after' | 'before';
 
+function EditorTabIcon({
+  fileIconKind,
+  icon,
+  iconImageUrl,
+}: {
+  fileIconKind?: FileIconKind | undefined;
+  icon?: string | undefined;
+  iconImageUrl?: string | null | undefined;
+}) {
+  if (iconImageUrl) {
+    return (
+      <WorkbenchMediaSlot
+        aria-hidden
+        className="ui-editor-tabs__icon-slot"
+        fallback={
+          <FileIcon
+            className="ui-editor-tabs__file-icon"
+            icon={icon ?? 'file'}
+            kind={fileIconKind}
+          />
+        }
+        imageClassName="ui-editor-tabs__image-icon"
+        imageUrl={iconImageUrl}
+      />
+    );
+  }
+
+  if (!icon) {
+    return null;
+  }
+
+  return <FileIcon className="ui-editor-tabs__file-icon" icon={icon} kind={fileIconKind} />;
+}
+
 export interface EditorTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
   activeId: string;
   addons?: ReactNode | undefined;
   draggableTabs?: boolean | undefined;
   onClose?: ((id: string) => void) | undefined;
   onNewTab?: (() => void) | undefined;
-  onPinToggle?: ((id: string) => void) | undefined;
   onSelect: (id: string) => void;
   onTabContextMenu?: ((id: string, event: ReactMouseEvent<HTMLElement>) => void) | undefined;
   onTabDoubleClick?: ((id: string, event: ReactMouseEvent<HTMLElement>) => void) | undefined;
@@ -109,7 +173,6 @@ export function EditorTabs({
   draggableTabs,
   onClose,
   onNewTab,
-  onPinToggle,
   onSelect,
   onTabContextMenu,
   onTabDoubleClick,
@@ -130,7 +193,12 @@ export function EditorTabs({
             <div
               key={tab.id}
               aria-selected={active}
-              className={cx('ui-editor-tabs__tab', active && 'ui-editor-tabs__tab--active')}
+              className={cx(
+                'ui-editor-tabs__tab',
+                active && 'ui-editor-tabs__tab--active',
+                tab.preview && 'ui-editor-tabs__tab--preview',
+                tab.missing && 'ui-editor-tabs__tab--missing',
+              )}
               data-drop-position={tab.dropPosition}
               draggable={draggableTabs}
               onClick={() => onSelect(tab.id)}
@@ -164,9 +232,11 @@ export function EditorTabs({
               tabIndex={active ? 0 : -1}
               title={tab.title}
             >
-              {tab.icon ? (
-                <i aria-hidden className={cxCodicon(tab.icon, 'ui-editor-tabs__file-icon')} />
-              ) : null}
+              <EditorTabIcon
+                fileIconKind={tab.fileIconKind}
+                icon={tab.icon}
+                iconImageUrl={tab.iconImageUrl}
+              />
               <span className="ui-editor-tabs__label">{tab.label}</span>
               {tab.preview ? (
                 <i
@@ -183,38 +253,6 @@ export function EditorTabs({
                   &bull;
                 </span>
               ) : null}
-              {tab.pinned ? (
-                onPinToggle ? (
-                  <button
-                    aria-label="Unpin tab"
-                    className="ui-editor-tabs__status-button"
-                    title="Unpin tab"
-                    type="button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onPinToggle(tab.id);
-                    }}
-                  >
-                    <i
-                      aria-hidden
-                      className={cxCodicon(
-                        'pinned',
-                        'ui-editor-tabs__status-icon',
-                        'ui-editor-tabs__status-icon--pinned',
-                      )}
-                    />
-                  </button>
-                ) : (
-                  <i
-                    aria-hidden
-                    className={cxCodicon(
-                      'pinned',
-                      'ui-editor-tabs__status-icon',
-                      'ui-editor-tabs__status-icon--pinned',
-                    )}
-                  />
-                )
-              ) : null}
               {(tab.closable ?? true) && onClose ? (
                 <IconButton
                   compact

package/src/primitives/workbench-editor/button-group.css

@@ -0,0 +1,10 @@
+.ui-button-group {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.workbench-extensions-sidebar__controls .ui-button-group {
+  display: flex;
+  width: 100%;
+}

package/src/primitives/workbench-editor/editor-tabs.css

@@ -0,0 +1,201 @@
+.ui-editor-tabs {
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 35px;
+  overflow: hidden;
+  background: var(--vscode-editorGroupHeader-tabsBackground, var(--color-editor-tab-strip-bg));
+  border-bottom: 1px solid var(--vscode-editorGroupHeader-border, var(--color-border));
+}
+
+.ui-editor-tabs__scroller {
+  display: flex;
+  flex: 1 1 0%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.ui-editor-tabs__tab {
+  --ui-editor-tabs-active-border: var(
+    --vscode-tab-activeBorderTop,
+    var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent)))
+  );
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+  min-width: 96px;
+  max-width: 240px;
+  min-height: 35px;
+  padding: 0 8px 0 10px;
+  color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
+  background: var(--vscode-tab-inactiveBackground, var(--color-editor-tab-inactive-bg));
+  border-right: 1px solid
+    color-mix(in srgb, var(--vscode-tab-border, var(--color-border)) 88%, transparent);
+  font: inherit;
+  font-size: var(--font-size-sm, 13px);
+  line-height: 20px;
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+}
+
+.ui-editor-tabs__tab::before {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 2px;
+  content: '';
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.ui-editor-tabs__tab:hover {
+  color: var(--vscode-tab-hoverForeground, var(--vscode-tab-activeForeground, var(--color-text)));
+  background: var(--vscode-tab-hoverBackground, var(--color-surface-hover));
+}
+
+.ui-editor-tabs__tab:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}
+
+.ui-editor-tabs__tab--active {
+  color: var(--vscode-tab-activeForeground, var(--color-text));
+  background: var(--vscode-tab-activeBackground, var(--color-editor-tab-active-bg));
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--vscode-editor-background, var(--color-editor-tab-active-bg));
+  font-weight: 500;
+  z-index: 1;
+}
+
+.ui-editor-tabs__tab--active::before {
+  background: var(--ui-editor-tabs-active-border);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--ui-editor-tabs-active-border) 28%, transparent);
+}
+
+.ui-editor-tabs__tab--preview .ui-editor-tabs__label {
+  font-style: italic;
+  opacity: 0.92;
+}
+
+.ui-editor-tabs__tab[data-drop-position]::after {
+  position: absolute;
+  inset-block: 4px;
+  z-index: 1;
+  width: 2px;
+  content: '';
+  background: var(--vscode-focusBorder, var(--color-focus-border));
+  border-radius: 1px;
+}
+
+.ui-editor-tabs__tab[data-drop-position='before']::after {
+  left: 0;
+}
+
+.ui-editor-tabs__tab[data-drop-position='after']::after {
+  right: 0;
+}
+
+.ui-editor-tabs__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-editor-tabs__icon-slot {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--vscode-foreground, var(--color-text)) 8%, transparent);
+}
+
+.ui-editor-tabs__file-icon {
+  flex: 0 0 auto;
+  font-size: 14px;
+  line-height: 1;
+  opacity: 0.92;
+  transition: opacity 120ms ease;
+}
+
+.ui-editor-tabs__image-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-editor-tabs__file-icon:not([data-file-kind]) {
+  color: var(--vscode-icon-foreground, var(--color-icon));
+}
+
+.ui-editor-tabs__tab--active .ui-editor-tabs__file-icon,
+.ui-editor-tabs__tab:hover .ui-editor-tabs__file-icon {
+  opacity: 1;
+}
+
+.ui-editor-tabs__status-icon {
+  flex: 0 0 auto;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 14px;
+  opacity: 0.82;
+}
+
+.ui-editor-tabs__tab--active .ui-editor-tabs__status-icon {
+  color: var(--vscode-tab-activeForeground, var(--color-text));
+  opacity: 0.9;
+}
+
+.ui-editor-tabs__dirty {
+  flex: 0 0 auto;
+  width: 14px;
+  color: var(--ui-editor-tabs-active-border);
+  font-size: 16px;
+  line-height: 1;
+  text-align: center;
+}
+
+.ui-editor-tabs__close {
+  flex: 0 0 auto;
+  margin-left: 0;
+  color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
+  background: transparent;
+  opacity: 0.74;
+}
+
+.ui-editor-tabs__tab:not(:hover):not(:focus-within):not(.ui-editor-tabs__tab--active)
+  .ui-editor-tabs__close {
+  opacity: 0;
+}
+
+.ui-editor-tabs__tab--active .ui-editor-tabs__close,
+.ui-editor-tabs__close:hover,
+.ui-editor-tabs__close:focus-visible {
+  color: var(--vscode-tab-activeForeground, var(--color-text));
+  opacity: 1;
+}
+
+.ui-editor-tabs__new {
+  align-self: center;
+  flex: 0 0 auto;
+  margin: 0 5px;
+  color: var(--vscode-icon-foreground, var(--color-icon));
+}
+
+.ui-editor-tabs__addons {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+}

package/src/primitives/workbench-editor/index.ts

@@ -0,0 +1 @@
+export * from './WorkbenchEditor';