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

package/src/primitives/list/list.css

@@ -0,0 +1,6 @@
+.ui-list {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,235 @@
+import './number-input.css';
+
+import {
+  useRef,
+  type ChangeEvent,
+  type InputEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type Ref,
+} from 'react';
+import { Codicon } from '../codicon/Codicon';
+import { TextInput } from '../text-input';
+import type { ControlWidth, TextInputProps } from '../text-input';
+import { cx } from '../../utils/cx';
+
+export interface NumberInputProps extends Omit<
+  TextInputProps,
+  'defaultValue' | 'onValueChange' | 'type' | 'value'
+> {
+  defaultValue?: number | undefined;
+  /**
+   * When true, `undefined` renders as an empty field. Clearing the input calls
+   * `onEmptyValue` (preferred) instead of `onValueChange`.
+   */
+  nullable?: boolean | undefined;
+  /** Fired when a nullable field is cleared. */
+  onEmptyValue?: (() => void) | undefined;
+  onValueChange?: ((value: number, event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+  value?: number | undefined;
+}
+
+function resolveStep(step: TextInputProps['step']): number {
+  if (step === undefined || step === 'any') {
+    return 1;
+  }
+  const parsed = typeof step === 'number' ? step : Number.parseFloat(String(step));
+  return Number.isFinite(parsed) && parsed !== 0 ? Math.abs(parsed) : 1;
+}
+
+function resolveBound(value: TextInputProps['min' | 'max']): number | undefined {
+  if (value === undefined || value === '') {
+    return undefined;
+  }
+  const parsed = typeof value === 'number' ? value : Number.parseFloat(String(value));
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function clamp(value: number, min: number | undefined, max: number | undefined): number {
+  let next = value;
+  if (min !== undefined && next < min) {
+    next = min;
+  }
+  if (max !== undefined && next > max) {
+    next = max;
+  }
+  return next;
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (!ref) {
+    return;
+  }
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+  (ref as { current: T | null }).current = value;
+}
+
+export function NumberInput({
+  className,
+  controlWidth = 'default',
+  defaultValue,
+  disabled,
+  max,
+  min,
+  nullable = false,
+  onChange,
+  onEmptyValue,
+  onInput,
+  onKeyDown,
+  onValueChange,
+  ref,
+  step,
+  value,
+  ...props
+}: NumberInputProps & { controlWidth?: ControlWidth }) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const stepAmount = resolveStep(step);
+  const minBound = resolveBound(min);
+  const maxBound = resolveBound(max);
+  const isControlled = value !== undefined || nullable;
+
+  const emitParsed = (rawValue: string, event: ChangeEvent<HTMLInputElement>) => {
+    if (rawValue.trim() === '') {
+      if (nullable) {
+        onEmptyValue?.();
+      }
+      return;
+    }
+    const parsed = Number.parseFloat(rawValue);
+    if (!Number.isNaN(parsed)) {
+      onValueChange?.(parsed, event);
+    }
+  };
+
+  const readCurrentNumber = (): number | undefined => {
+    if (isControlled) {
+      return value;
+    }
+    const raw = inputRef.current?.value ?? '';
+    if (raw.trim() === '') {
+      return undefined;
+    }
+    const parsed = Number.parseFloat(raw);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  };
+
+  const commitSteppedValue = (next: number) => {
+    if (disabled) {
+      return;
+    }
+    const clamped = clamp(next, minBound, maxBound);
+    const input = inputRef.current;
+    if (input && !isControlled) {
+      input.value = String(clamped);
+    }
+    onValueChange?.(clamped, {
+      currentTarget: input ?? ({ value: String(clamped) } as HTMLInputElement),
+      target: input ?? ({ value: String(clamped) } as HTMLInputElement),
+    } as ChangeEvent<HTMLInputElement>);
+  };
+
+  const stepBy = (direction: 1 | -1) => {
+    const current = readCurrentNumber();
+    const base =
+      current === undefined ? (direction === 1 ? (minBound ?? 0) : (maxBound ?? 0)) : current;
+    commitSteppedValue(base + direction * stepAmount);
+  };
+
+  const handleInput = (event: InputEvent<HTMLInputElement>) => {
+    onInput?.(event);
+    emitParsed(event.currentTarget.value, event as unknown as ChangeEvent<HTMLInputElement>);
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event);
+    if ((event.nativeEvent as Event).type !== 'input') {
+      emitParsed(event.currentTarget.value, event);
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      stepBy(1);
+      return;
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      stepBy(-1);
+    }
+  };
+
+  const handleStepMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
+  const current = readCurrentNumber();
+  const decrementDisabled =
+    Boolean(disabled) || (current !== undefined && minBound !== undefined && current <= minBound);
+  const incrementDisabled =
+    Boolean(disabled) || (current !== undefined && maxBound !== undefined && current >= maxBound);
+
+  const valueProps = isControlled
+    ? { value: value === undefined ? '' : value }
+    : defaultValue !== undefined
+      ? { defaultValue }
+      : {};
+
+  return (
+    <div
+      className={cx('ui-number-input', className)}
+      data-disabled={disabled ? 'true' : undefined}
+      data-width={controlWidth}
+    >
+      <TextInput
+        {...props}
+        {...valueProps}
+        className="ui-number-input__field"
+        controlWidth="full"
+        disabled={disabled}
+        max={max}
+        min={min}
+        ref={(node) => {
+          inputRef.current = node;
+          assignRef(ref, node);
+        }}
+        step={step}
+        type="number"
+        onChange={handleChange}
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+      />
+      <div className="ui-number-input__spinners">
+        <button
+          aria-label="Increment"
+          className="ui-number-input__step"
+          disabled={incrementDisabled}
+          tabIndex={-1}
+          type="button"
+          onClick={() => stepBy(1)}
+          onMouseDown={handleStepMouseDown}
+        >
+          <Codicon icon="chevron-up" />
+        </button>
+        <button
+          aria-label="Decrement"
+          className="ui-number-input__step"
+          disabled={decrementDisabled}
+          tabIndex={-1}
+          type="button"
+          onClick={() => stepBy(-1)}
+          onMouseDown={handleStepMouseDown}
+        >
+          <Codicon icon="chevron-down" />
+        </button>
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,105 @@
+.ui-number-input {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.ui-number-input[data-width='default'] {
+  width: var(--ui-input-width, 320px);
+}
+
+.ui-number-input[data-width='wide'] {
+  width: 420px;
+}
+
+.ui-number-input[data-width='full'] {
+  display: flex;
+  width: 100%;
+}
+
+.ui-number-input__field {
+  width: 100%;
+  /* room for themed steppers */
+  padding-right: 22px;
+}
+
+.ui-number-input__field::-webkit-outer-spin-button,
+.ui-number-input__field::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.ui-number-input__field[type='number'] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.ui-number-input__spinners {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: 18px;
+  overflow: hidden;
+  border-left: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
+  border-radius: 0 var(--ui-input-border-radius, var(--radius-sm))
+    var(--ui-input-border-radius, var(--radius-sm)) 0;
+  background: var(--color-surface-raised, var(--color-surface));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 80ms ease;
+}
+
+.ui-number-input:hover:not([data-disabled='true']) .ui-number-input__spinners,
+.ui-number-input:focus-within:not([data-disabled='true']) .ui-number-input__spinners {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ui-number-input__step {
+  display: inline-flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: var(--color-text-muted, var(--color-text-secondary));
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-number-input__step + .ui-number-input__step {
+  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
+}
+
+.ui-number-input__step:hover:not(:disabled) {
+  color: var(--color-text);
+  background: var(--color-list-hoverBackground, rgba(255, 255, 255, 0.06));
+}
+
+.ui-number-input__step:active:not(:disabled) {
+  background: var(--color-list-activeSelectionBackground, rgba(255, 255, 255, 0.1));
+}
+
+.ui-number-input__step:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.ui-number-input__step:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+.ui-number-input__step .codicon {
+  font-size: 10px;
+  line-height: 1;
+}

package/src/primitives/panel-loading/PanelLoading.tsx

@@ -0,0 +1,29 @@
+import './panel-loading.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+
+export interface PanelLoadingProps extends ComponentPropsWithRef<'div'> {
+  label: ReactNode;
+  showSpinner?: boolean;
+}
+
+export function PanelLoading({
+  className,
+  label,
+  showSpinner = true,
+  ...props
+}: PanelLoadingProps) {
+  return (
+    <div
+      aria-live="polite"
+      className={cx('ui-panel-loading', 'ui-panel-centered-state', className)}
+      role="status"
+      {...props}
+    >
+      {showSpinner ? (
+        <i aria-hidden className="codicon codicon-loading codicon-modifier-spin" />
+      ) : null}
+      <span>{label}</span>
+    </div>
+  );
+}

package/src/primitives/panel-loading/index.ts

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

package/src/primitives/panel-loading/panel-loading.css

@@ -0,0 +1,16 @@
+.ui-panel-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 100%;
+  padding: 24px var(--ui-sidebar-inline-padding, 8px);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.ui-panel-loading .codicon {
+  color: var(--color-accent);
+  font-size: 16px;
+}

package/src/primitives/panel-surface/panel-surface.css

@@ -0,0 +1,77 @@
+.ide-panel {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--panel-bg, var(--color-bg));
+}
+
+/* Shared panel chrome — single source for PanelHeader and panel surfaces. */
+.panel-header {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: var(--panel-header-height, var(--workbench-header-height));
+  padding: 0 16px;
+  color: var(--color-text-muted);
+  background: var(--panel-bg, var(--color-bg));
+  border-bottom: var(--shell-border-width) solid var(--color-border);
+  font-size: var(--shell-font-size-panel-title);
+}
+
+.ui-panel-header__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-panel-header__actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+}
+
+.panel-body,
+.ui-panel-body {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-panel-footer,
+.ui-workbench-panel-footer {
+  flex: 0 0 auto;
+  padding: 8px;
+  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-filter-bar,
+.ui-workbench-filter-bar {
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-help-text,
+.ui-workbench-help-text {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-help-text--error,
+.ui-workbench-help-text--error {
+  color: var(--vscode-errorForeground, var(--color-error));
+}

package/src/primitives/primitives.css

@@ -0,0 +1,36 @@
+/* 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 './badge/badge.css';
+@import './button/button.css';
+@import './chip/chip.css';
+@import './catalog-browse-card/catalog-browse-card.css';
+@import './checkbox/checkbox.css';
+@import './clearable-text-input/clearable-text-input.css';
+@import './empty-state/empty-state.css';
+@import './field/field.css';
+@import './icon-button/icon-button.css';
+@import './catalog-browse-pane/catalog-browse-pane.css';
+@import './catalog-filter-overlay/catalog-filter-overlay.css';
+@import './library-detail-layout/library-detail-layout.css';
+@import './library-facet-filter-strip/library-facet-filter-strip.css';
+@import './library-facet-filter-panel/library-facet-filter-panel.css';
+@import './list/list-empty-state.css';
+@import './list/list-item.css';
+@import './list/list.css';
+@import './number-input/number-input.css';
+@import './panel-loading/panel-loading.css';
+@import './panel-surface/panel-surface.css';
+@import './record-media-hero/record-media-hero.css';
+@import './scroll-area-infinite-load/scroll-area-infinite-sentinel.css';
+@import './select/select.app.css';
+@import './select/select.css';
+@import './searchable-multi-select/searchable-multi-select.css';
+@import './text-input/input.css';
+@import './visually-hidden/visually-hidden.css';
+@import './tabbed-panels/tabbed-panels.css';
+@import './workbench-editor/button-group.css';
+@import './workbench-editor/editor-tabs.css';
+@import './workbench-editor/resizable-panels.css';
+@import './workbench-editor/segmented-control.css';
+@import './workbench-media-slot/media-slot.css';
+@import './workbench-thumbnail/thumbnail.css';

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

@@ -0,0 +1,81 @@
+import './record-media-hero.css';
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+import { useWorkbenchMediaImage } from '../../utils/useWorkbenchMediaImage';
+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;
+}
+
+function resolveMaxWidth(maxWidth: number | string | undefined): CSSProperties['maxWidth'] {
+  if (maxWidth === undefined) {
+    return undefined;
+  }
+
+  return typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
+}
+
+export function RecordMediaHero({
+  alt,
+  className,
+  fallbackIcon = 'file-media',
+  imageUrl = null,
+  layout = 'banner',
+  logoUrl = null,
+  maxWidth,
+  style,
+  ...props
+}: RecordMediaHeroProps) {
+  const logoMedia = useWorkbenchMediaImage(logoUrl);
+  const resolvedMaxWidth = resolveMaxWidth(maxWidth);
+
+  return (
+    <div
+      className={cx(
+        'ui-record-media-hero',
+        layout === 'compact' && 'ui-record-media-hero--compact',
+        layout === 'background' && 'ui-record-media-hero--background',
+        className,
+      )}
+      style={{
+        ...(resolvedMaxWidth !== undefined ? { maxWidth: resolvedMaxWidth } : undefined),
+        ...style,
+      }}
+      {...props}
+    >
+      <WorkbenchMediaSlot
+        alt={alt}
+        as="div"
+        className="ui-record-media-hero__surface"
+        fallback={
+          <div aria-hidden className="ui-record-media-hero__fallback">
+            <i className={cxCodicon(fallbackIcon)} />
+          </div>
+        }
+        fill
+        imageClassName="ui-record-media-hero__image"
+        imageUrl={imageUrl}
+        loading="eager"
+      />
+      {logoMedia.shouldShowImage ? (
+        <img
+          alt=""
+          className="ui-record-media-hero__logo"
+          loading="eager"
+          onError={logoMedia.onImageError}
+          src={logoMedia.imageSrc}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/primitives/record-media-hero/index.ts

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

package/src/primitives/record-media-hero/record-media-hero.css

@@ -0,0 +1,84 @@
+.ui-record-media-hero {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--shell-color-surface-sunken, rgba(255, 255, 255, 0.03));
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+  border-radius: var(--shell-radius-md, 6px);
+}
+
+.ui-record-media-hero--compact {
+  box-sizing: border-box;
+  width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  min-width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  max-width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  min-height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  max-height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  aspect-ratio: var(--shell-library-capsule-aspect, 116 / 43);
+  align-self: center;
+  flex-shrink: 0;
+}
+
+.ui-record-media-hero--background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  border: none;
+  border-radius: 0;
+  opacity: 0.35;
+}
+
+.ui-record-media-hero--background .ui-record-media-hero__image {
+  object-fit: cover;
+  filter: blur(2px);
+}
+
+.ui-record-media-hero--background .ui-record-media-hero__fallback {
+  font-size: 64px;
+}
+
+.ui-record-media-hero__surface {
+  position: absolute;
+  inset: 0;
+}
+
+.ui-record-media-hero__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-record-media-hero__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--shell-color-text-muted, var(--color-text-muted));
+  font-size: 48px;
+}
+
+.ui-record-media-hero__logo {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  max-width: min(40%, 180px);
+  max-height: 48px;
+  object-fit: contain;
+}