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

package/src/primitives/workbench-editor/resizable-panels.css

@@ -0,0 +1,53 @@
+.ui-resizable-panels {
+  display: grid;
+  grid-template-columns: var(--ui-resizable-panels-size) 1px minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-resizable-panels[data-sized-panel='second'] {
+  grid-template-columns: minmax(0, 1fr) 1px var(--ui-resizable-panels-size);
+}
+
+.ui-resizable-panels--vertical {
+  grid-template-columns: none;
+  grid-template-rows: var(--ui-resizable-panels-size) 1px minmax(0, 1fr);
+}
+
+.ui-resizable-panels--vertical[data-sized-panel='second'] {
+  grid-template-columns: none;
+  grid-template-rows: minmax(0, 1fr) 1px var(--ui-resizable-panels-size);
+}
+
+.ui-resizable-panels__pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-resizable-panels__separator {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  background: var(--vscode-panel-border, var(--color-border));
+  outline: none;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.ui-resizable-panels__separator::after {
+  content: '';
+  position: absolute;
+  inset: 0 -8px;
+}
+
+.ui-resizable-panels--vertical .ui-resizable-panels__separator {
+  cursor: row-resize;
+}
+
+.ui-resizable-panels--vertical .ui-resizable-panels__separator::after {
+  inset: -8px 0;
+}

package/src/primitives/workbench-editor/segmented-control.css

@@ -0,0 +1,98 @@
+/*
+ * Attached segmented toggle — shares Button chrome tokens.
+ * Outer border lives on the group; items use dividers only (no double borders).
+ */
+.ui-segmented-control.ui-button-group {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: var(--ui-button-border, 1px solid var(--color-border));
+  border-radius: var(--ui-button-border-radius, var(--radius-sm));
+  background: var(--ui-button-background, var(--color-surface));
+}
+
+.ui-segmented-control__item {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-button-gap, 6px);
+  height: var(--ui-button-height, var(--ui-button-height-default));
+  min-height: var(--ui-button-height, var(--ui-button-height-default));
+  padding: var(--ui-button-padding, 0 var(--ui-button-padding-x));
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  border-right: var(--ui-button-border, 1px solid var(--color-border));
+  color: var(--ui-button-color, var(--color-text));
+  background: transparent;
+  font-family: var(--ui-button-font-family, inherit);
+  font-size: var(--ui-button-font-size, var(--font-size-sm));
+  font-weight: var(--ui-button-font-weight, 400);
+  line-height: var(--ui-button-line-height, 1.2);
+  cursor: var(--ui-button-cursor, pointer);
+}
+
+.ui-segmented-control__item:last-child {
+  border-right: none;
+}
+
+.ui-segmented-control__item:hover {
+  color: var(--ui-button-hover-color, var(--ui-button-color, var(--color-text)));
+  background: var(--ui-button-hover-background, var(--color-surface-hover));
+}
+
+.ui-segmented-control__item:focus-visible {
+  outline: 1px solid var(--color-focus-border);
+  outline-offset: -1px;
+  z-index: 1;
+}
+
+.ui-segmented-control__item:disabled,
+.ui-segmented-control__item:disabled:hover {
+  color: var(--ui-button-disabled-color, var(--color-text-subtle));
+  background: transparent;
+  cursor: var(--ui-button-disabled-cursor, default);
+}
+
+.ui-segmented-control__item--selected,
+.ui-segmented-control__item--selected:hover {
+  color: var(
+    --ui-segmented-control-selected-color,
+    var(--vscode-list-activeSelectionForeground, var(--color-text))
+  );
+  background: var(
+    --ui-segmented-control-selected-background,
+    var(
+      --vscode-list-activeSelectionBackground,
+      var(--color-surface-elevated, var(--color-surface-hover))
+    )
+  );
+}
+
+.ui-segmented-control--compact .ui-segmented-control__item {
+  height: var(--ui-button-height-compact);
+  min-height: var(--ui-button-height-compact);
+  padding: 0 var(--ui-button-padding-x-compact);
+}
+
+/* Icon-only segments: keep glyph centered without text padding bias. */
+.ui-segmented-control__item .codicon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.workbench-extensions-sidebar__controls .ui-segmented-control.ui-button-group {
+  display: flex;
+  width: 100%;
+}
+
+.workbench-extensions-sidebar__controls .ui-segmented-control__item {
+  flex: 1 1 0;
+  min-width: 0;
+}

package/src/primitives/workbench-media-slot/WorkbenchMediaPlaceholder.tsx

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithRef } from 'react';
+
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+
+export interface WorkbenchMediaPlaceholderProps extends ComponentPropsWithRef<'span'> {
+  icon?: string | undefined;
+  iconClassName?: string | undefined;
+}
+
+/**
+ * Default empty-state surface for {@link WorkbenchMediaSlot}: fills the slot box and centers a codicon.
+ */
+export function WorkbenchMediaPlaceholder({
+  className,
+  icon = 'file-media',
+  iconClassName,
+  ...props
+}: WorkbenchMediaPlaceholderProps) {
+  return (
+    <span aria-hidden className={cx('ui-workbench-media-slot__placeholder', className)} {...props}>
+      <i className={cx('ui-workbench-media-slot__icon', iconClassName, cxCodicon(icon))} />
+    </span>
+  );
+}

package/src/primitives/workbench-media-slot/WorkbenchMediaSlot.tsx

@@ -0,0 +1,60 @@
+import './media-slot.css';
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+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;
+  /** Stretch to fill the parent box (hero/cover surfaces). */
+  fill?: boolean | undefined;
+  imageClassName?: string | undefined;
+  imageUrl?: string | null | undefined;
+  /**
+   * 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;
+}
+
+export function WorkbenchMediaSlot({
+  alt,
+  as: Component = 'span',
+  className,
+  fallback,
+  fallbackClassName,
+  fallbackIcon = 'file-media',
+  fill = false,
+  imageClassName,
+  imageUrl = null,
+  loading = 'lazy',
+  ...props
+}: WorkbenchMediaSlotProps) {
+  const media = useWorkbenchMediaImage(imageUrl);
+
+  return (
+    <Component
+      className={cx('ui-workbench-media-slot', fill && 'ui-workbench-media-slot--fill', className)}
+      {...(props as ComponentPropsWithRef<ElementType>)}
+    >
+      {media.shouldShowImage ? (
+        <img
+          alt={alt ?? ''}
+          className={cx('ui-workbench-media-slot__image', imageClassName)}
+          loading={loading}
+          onError={media.onImageError}
+          src={media.imageSrc}
+        />
+      ) : (
+        (fallback ?? (
+          <WorkbenchMediaPlaceholder icon={fallbackIcon} iconClassName={fallbackClassName} />
+        ))
+      )}
+    </Component>
+  );
+}

package/src/primitives/workbench-media-slot/index.ts

@@ -0,0 +1,2 @@
+export * from './WorkbenchMediaPlaceholder';
+export * from './WorkbenchMediaSlot';

package/src/primitives/workbench-media-slot/media-slot.css

@@ -0,0 +1,72 @@
+.ui-workbench-media-slot {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.ui-workbench-media-slot--fill {
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-workbench-media-slot__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+.ui-workbench-media-slot--fill .ui-workbench-media-slot__placeholder {
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-workbench-media-slot--fill .ui-workbench-media-slot__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-media-slot--fill .ui-workbench-media-slot__image {
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  object-fit: var(--ui-workbench-media-object-fit, cover);
+  object-position: center;
+}
+
+.ui-workbench-media-slot__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: var(--ui-workbench-media-object-fit, cover);
+  object-position: center;
+}
+
+.ui-workbench-media-slot__icon {
+  color: var(--shell-color-text-muted, var(--vscode-icon-foreground, var(--color-icon)));
+  font-size: var(--ui-workbench-media-placeholder-icon-size, 1em);
+  line-height: 1;
+}

package/src/primitives/workbench-thumbnail/WorkbenchThumbnail.tsx

@@ -0,0 +1,38 @@
+import './thumbnail.css';
+import type { ComponentPropsWithRef } from 'react';
+
+import { cx } from '../../utils/cx';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
+
+export type WorkbenchThumbnailSize = 'sm' | 'md' | 'library' | 'icon';
+
+export interface WorkbenchThumbnailProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+  alt?: string | undefined;
+  fallbackIcon?: string | undefined;
+  imageUrl?: string | null | undefined;
+  size?: WorkbenchThumbnailSize | undefined;
+}
+
+export function WorkbenchThumbnail({
+  alt,
+  className,
+  fallbackIcon = 'file-media',
+  imageUrl = null,
+  size = 'sm',
+  ...props
+}: WorkbenchThumbnailProps) {
+  return (
+    <WorkbenchMediaSlot
+      alt={alt}
+      aria-hidden={alt ? undefined : true}
+      className={cx('ui-workbench-thumbnail', className)}
+      data-size={size}
+      fallbackClassName="ui-workbench-thumbnail__icon"
+      fallbackIcon={fallbackIcon}
+      fill
+      imageClassName="ui-workbench-thumbnail__image"
+      imageUrl={imageUrl}
+      {...props}
+    />
+  );
+}

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

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

package/src/primitives/workbench-thumbnail/thumbnail.css

@@ -0,0 +1,69 @@
+.ui-workbench-thumbnail {
+  --ui-workbench-thumbnail-width: 46px;
+  --ui-workbench-thumbnail-height: 28px;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-workbench-thumbnail-width);
+  height: var(--ui-workbench-thumbnail-height);
+  min-width: var(--ui-workbench-thumbnail-width);
+  max-width: var(--ui-workbench-thumbnail-width);
+  min-height: var(--ui-workbench-thumbnail-height);
+  max-height: var(--ui-workbench-thumbnail-height);
+  overflow: hidden;
+  background: var(--shell-color-surface-sunken, var(--vscode-editor-background, var(--color-bg)));
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--vscode-panel-border, var(--color-border)));
+  border-radius: var(--shell-radius-sm, 4px);
+}
+
+.ui-workbench-thumbnail[data-size='md'] {
+  --ui-workbench-thumbnail-width: 64px;
+  --ui-workbench-thumbnail-height: 36px;
+}
+
+.ui-workbench-thumbnail[data-size='library'] {
+  --ui-workbench-thumbnail-width: var(--shell-library-capsule-list-width, 116px);
+  --ui-workbench-thumbnail-height: var(--shell-library-capsule-list-height, 43px);
+}
+
+.ui-workbench-thumbnail[data-size='icon'] {
+  --ui-workbench-thumbnail-width: 20px;
+  --ui-workbench-thumbnail-height: 20px;
+  background: var(--ui-workbench-thumbnail-icon-background, transparent);
+  border: var(--ui-workbench-thumbnail-icon-border-width, 0) solid
+    var(--ui-workbench-thumbnail-icon-border-color, transparent);
+  border-radius: var(--shell-radius-xs, 2px);
+}
+
+.ui-workbench-thumbnail .ui-workbench-media-slot__placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-thumbnail__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-workbench-thumbnail__icon {
+  color: var(--shell-color-text-muted, var(--vscode-icon-foreground, var(--color-icon)));
+  font-size: 14px;
+}
+
+.ui-workbench-thumbnail[data-size='md'] .ui-workbench-thumbnail__icon {
+  font-size: 18px;
+}
+
+.ui-workbench-thumbnail[data-size='library'] .ui-workbench-thumbnail__icon {
+  font-size: 22px;
+}
+
+.ui-workbench-thumbnail[data-size='icon'] .ui-workbench-thumbnail__icon {
+  font-size: 16px;
+}

package/src/scrollbars.css

@@ -1,3 +1,63 @@
+/*
+ * Themed scrollbars:
+ * - Theme host (`[data-theme]` / WorkbenchThemeProvider) owns the default look.
+ * - Call sites use `overflow: auto` or `ScrollArea` — no class-name soup required.
+ * - `.ui-workbench-scrollbar` remains an explicit opt-in for out-of-theme hosts/portals.
+ * - Visibility modifiers (`--hidden`, primary sidebar) stay as exceptions.
+ */
+
+[data-theme],
+[data-theme-preset],
+.ui-workbench-host-root {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  scrollbar-width: thin;
+}
+
+/*
+ * Chromium often leaves overflow boxes at scrollbar-width:auto even though the
+ * property is inherited — force inherit under the theme host.
+ */
+[data-theme] :where(*),
+[data-theme-preset] :where(*),
+.ui-workbench-host-root :where(*) {
+  scrollbar-color: inherit;
+  scrollbar-width: inherit;
+}
+
+/* WebKit painting must target the scrollport; :where(*) survives CSS minify better than bare * */
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
+  :where(*)::-webkit-scrollbar-button {
+  display: none;
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border: var(--scrollbar-thumb-inset) solid transparent;
+  border-radius: calc(var(--scrollbar-size) / 2);
+  background-clip: content-box;
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
+  :where(*)::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+  background-clip: content-box;
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
+  :where(*)::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-thumb-active);
+  background-clip: content-box;
+}
+
 .ui-scroll-area {
   min-width: 0;
   min-height: 0;
@@ -21,6 +81,7 @@
   scrollbar-gutter: stable;
 }
 
+/* Explicit opt-in (ScrollArea, out-of-theme hosts) — same tokens as theme host */
 .ui-workbench-scrollbar {
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
   scrollbar-width: thin;
@@ -57,13 +118,27 @@
 }
 
 .ui-workbench-scrollbar--hidden,
-.workbench-primary-side-bar .panel-body {
+.workbench-primary-sidebar .ui-sidebar-view__body,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}
+
+/*
+ * Overlay scrollports hide the *native* classic bar (gutter 0, no hover width
+ * toggle). `ScrollArea scrollbars="overlay"` paints an absolute rail/thumb in
+ * `scroll-area-overlay.css`. Do not reintroduce ::-webkit-scrollbar width
+ * 0↔N or scrollbar-width none↔thin on hover — that reflows Library filters.
+ */
+.ui-workbench-scrollbar--overlay {
   scrollbar-gutter: auto;
   scrollbar-width: none;
 }
 
 .ui-workbench-scrollbar--hidden::-webkit-scrollbar,
-.workbench-primary-side-bar .panel-body::-webkit-scrollbar {
+.ui-workbench-scrollbar--overlay::-webkit-scrollbar,
+.workbench-primary-sidebar .ui-sidebar-view__body::-webkit-scrollbar,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content::-webkit-scrollbar {
   width: 0;
   height: 0;
 }