@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.10

package/src/workbench/theme/themePresets.ts

@@ -0,0 +1,191 @@
+import { resolveWorkbenchTheme, type ResolvedWorkbenchTheme } from './theme';
+import type { WorkbenchTheme } from '../shell/standalone';
+import { applyWorkbenchShellAttributes } from '../shell/shellPresets';
+
+export interface WorkbenchThemePresetManifestEntry<TId extends string = string> {
+  readonly id: TId;
+  readonly label: string;
+}
+
+/** One manifest entry per CSS preset file under `@workbench-kit/tokens/src/themes/`. */
+export const LIGHT_THEME_PRESET_MANIFEST = [
+  { id: 'orange', label: 'Light Orange' },
+  { id: 'skyblue', label: 'Sky Blue' },
+  { id: 'light-plus', label: 'Light+' },
+] as const satisfies readonly WorkbenchThemePresetManifestEntry[];
+
+export const DARK_THEME_PRESET_MANIFEST = [
+  { id: 'navy', label: 'Deep Navy' },
+  { id: 'purple', label: 'Purple' },
+  { id: 'modern', label: 'Modern Dark' },
+  { id: 'dark-plus', label: 'Dark+' },
+  { id: 'hc-black', label: 'High Contrast Black' },
+] as const satisfies readonly WorkbenchThemePresetManifestEntry[];
+
+export type LightThemePresetId = (typeof LIGHT_THEME_PRESET_MANIFEST)[number]['id'];
+export type DarkThemePresetId = (typeof DARK_THEME_PRESET_MANIFEST)[number]['id'];
+export type ThemePresetId = LightThemePresetId | DarkThemePresetId;
+
+export const DEFAULT_LIGHT_THEME_PRESET: LightThemePresetId = 'skyblue';
+export const DEFAULT_DARK_THEME_PRESET: DarkThemePresetId = 'purple';
+
+export type WorkbenchColorSchemePreference = 'system' | WorkbenchTheme;
+
+export const WORKBENCH_COLOR_SCHEME_OPTIONS: WorkbenchThemePresetOption<WorkbenchColorSchemePreference>[] =
+  [
+    { id: 'system', label: 'System' },
+    { id: 'light', label: 'Light' },
+    { id: 'dark', label: 'Dark' },
+  ];
+
+export interface WorkbenchThemePresetOption<TId extends string = string> {
+  id: TId;
+  label: string;
+}
+
+export const LIGHT_THEME_PRESET_OPTIONS: WorkbenchThemePresetOption<LightThemePresetId>[] =
+  LIGHT_THEME_PRESET_MANIFEST.map((entry) => ({ id: entry.id, label: entry.label }));
+
+export const DARK_THEME_PRESET_OPTIONS: WorkbenchThemePresetOption<DarkThemePresetId>[] =
+  DARK_THEME_PRESET_MANIFEST.map((entry) => ({ id: entry.id, label: entry.label }));
+
+const LIGHT_THEME_PRESET_IDS = new Set<string>(
+  LIGHT_THEME_PRESET_MANIFEST.map((entry) => entry.id),
+);
+const DARK_THEME_PRESET_IDS = new Set<string>(DARK_THEME_PRESET_MANIFEST.map((entry) => entry.id));
+
+export interface WorkbenchThemePresetSelection {
+  /** A built-in preset id, or a contributed theme id with a matching `mode`. */
+  lightPreset: string;
+  darkPreset: string;
+}
+
+export function isLightThemePresetId(
+  value: string | null | undefined,
+): value is LightThemePresetId {
+  return value != null && LIGHT_THEME_PRESET_IDS.has(value);
+}
+
+export function isDarkThemePresetId(value: string | null | undefined): value is DarkThemePresetId {
+  return value != null && DARK_THEME_PRESET_IDS.has(value);
+}
+
+export function resolveActiveThemePreset(
+  resolvedTheme: ResolvedWorkbenchTheme,
+  selection: WorkbenchThemePresetSelection,
+): string {
+  return resolvedTheme === 'light' ? selection.lightPreset : selection.darkPreset;
+}
+
+export interface WorkbenchThemeDocumentAttributes extends WorkbenchThemePresetSelection {
+  resolvedTheme: ResolvedWorkbenchTheme;
+  themePreference?: string | undefined;
+}
+
+export interface WorkbenchThemeProviderAttributes {
+  shellPreset?: string | undefined;
+  theme: ResolvedWorkbenchTheme;
+  themePreference?: string | undefined;
+  themePreset?: string | undefined;
+}
+
+export interface ResolveWorkbenchThemeProviderAttributesInput extends WorkbenchThemePresetSelection {
+  resolvedTheme: ResolvedWorkbenchTheme;
+  shellPreset?: string | undefined;
+  themePreference?: string | undefined;
+}
+
+export function resolveWorkbenchThemeProviderAttributes({
+  darkPreset,
+  lightPreset,
+  resolvedTheme,
+  shellPreset,
+  themePreference,
+}: ResolveWorkbenchThemeProviderAttributesInput): WorkbenchThemeProviderAttributes {
+  return {
+    shellPreset,
+    theme: resolvedTheme,
+    themePreference,
+    themePreset: resolveActiveThemePreset(resolvedTheme, {
+      darkPreset,
+      lightPreset,
+    }),
+  };
+}
+
+export function applyWorkbenchThemeProviderAttributes(
+  root: HTMLElement,
+  attributes: WorkbenchThemeProviderAttributes,
+): void {
+  root.dataset.theme = attributes.theme;
+
+  if (attributes.themePreference === undefined) {
+    delete root.dataset.themePreference;
+  } else {
+    root.dataset.themePreference = attributes.themePreference;
+  }
+
+  if (attributes.themePreset === undefined || attributes.themePreset === '') {
+    delete root.dataset.themePreset;
+  } else {
+    root.dataset.themePreset = attributes.themePreset;
+  }
+
+  if (attributes.shellPreset === undefined) {
+    delete root.dataset.shellPreset;
+  } else {
+    applyWorkbenchShellAttributes(root, attributes.shellPreset);
+  }
+}
+
+/**
+ * Applies resolved theme mode and active preset to a DOM root (typically `document.documentElement`).
+ */
+export function applyWorkbenchThemeAttributes(
+  root: HTMLElement,
+  attributes: WorkbenchThemeDocumentAttributes,
+): void {
+  root.dataset.theme = attributes.resolvedTheme;
+
+  if (attributes.themePreference === undefined) {
+    delete root.dataset.themePreference;
+  } else {
+    root.dataset.themePreference = attributes.themePreference;
+  }
+
+  root.dataset.themePreset = resolveActiveThemePreset(attributes.resolvedTheme, attributes);
+}
+
+export interface WorkbenchAppearanceSettings {
+  /** VS Code: workbench.preferredDarkColorTheme (color preset id for dark mode). */
+  darkPreset: string;
+  /** VS Code: workbench.preferredLightColorTheme (color preset id for light mode). */
+  lightPreset: string;
+  /** Workbench layout metrics preset (`data-shell-preset`); orthogonal to Color Theme. */
+  shellPreset: string;
+  /** VS Code: window.autoDetectColorScheme + forced light/dark. */
+  themePreference: WorkbenchColorSchemePreference;
+}
+
+/**
+ * Applies color scheme preference and light/dark presets to a DOM root (typically `document.documentElement`).
+ * Returns the resolved attributes so callers can derive the active preset id without
+ * recomputing `resolveWorkbenchTheme` themselves.
+ */
+export function applyWorkbenchAppearance(
+  root: HTMLElement,
+  settings: WorkbenchAppearanceSettings,
+): WorkbenchThemeDocumentAttributes {
+  const attributes: WorkbenchThemeDocumentAttributes = {
+    darkPreset: settings.darkPreset,
+    lightPreset: settings.lightPreset,
+    resolvedTheme: resolveWorkbenchTheme(settings.themePreference),
+    themePreference: settings.themePreference,
+  };
+
+  applyWorkbenchThemeAttributes(root, attributes);
+
+  applyWorkbenchShellAttributes(root, settings.shellPreset);
+
+  return attributes;
+}

package/src/workbench/views/action-list.css

@@ -0,0 +1,144 @@
+.ui-workbench-action-list__empty {
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--ui-sidebar-inline-padding) 0 calc(var(--ui-sidebar-inline-padding) + 18px);
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-sm);
+}
+
+.ui-workbench-action-list-item {
+  min-height: 30px;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto 16px;
+  align-items: center;
+  gap: 6px;
+  padding-right: var(--ui-sidebar-inline-padding);
+}
+
+.ui-workbench-action-list-item[data-show-status='false'] {
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+}
+
+.ui-workbench-action-list-item--with-description {
+  min-height: 46px;
+}
+
+.ui-workbench-action-list-item__icon,
+.ui-workbench-action-list-item__status {
+  width: 16px;
+  min-width: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-action-list-item__icon {
+  color: var(--color-text-subtle);
+}
+
+.ui-workbench-action-list-item__icon .codicon {
+  font-size: 14px;
+}
+
+.ui-workbench-action-list-item__content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+}
+
+.ui-workbench-action-list-item__label,
+.ui-workbench-action-list-item__description {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-action-list-item__label {
+  color: inherit;
+}
+
+.ui-workbench-action-list-item__description {
+  color: var(--color-text-subtle);
+  font-size: 11px;
+}
+
+.ui-workbench-action-list-item__meta {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.ui-workbench-action-list-item__shortcut {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  color: var(--color-text-subtle);
+  background: transparent;
+  font-family: inherit;
+  font-size: 11px;
+}
+
+.ui-workbench-action-list-item__status-dot {
+  width: 7px;
+  height: 7px;
+  display: inline-block;
+  border-radius: 50%;
+  background: transparent;
+}
+
+.ui-workbench-action-list-item[data-status='idle'] .ui-workbench-action-list-item__status-dot {
+  background: color-mix(in srgb, var(--color-text-subtle) 45%, transparent);
+}
+
+.ui-workbench-action-list-item[data-status='running'] .ui-workbench-action-list-item__status-dot {
+  background: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+.ui-workbench-action-list-item[data-status='completed'] .ui-workbench-action-list-item__status-dot {
+  background: #5fbf72;
+}
+
+.ui-workbench-action-list-item[data-status='failed'] .ui-workbench-action-list-item__status-dot {
+  background: var(--color-danger);
+}
+
+.ui-workbench-action-list-item[data-status='waiting'] .ui-workbench-action-list-item__status-dot {
+  background: #d6aa37;
+}
+
+.ui-workbench-action-list-item[data-status='cancelled'] .ui-workbench-action-list-item__status-dot,
+.ui-workbench-action-list-item[data-status='disabled'] .ui-workbench-action-list-item__status-dot,
+.ui-workbench-action-list-item[data-status='unavailable']
+  .ui-workbench-action-list-item__status-dot,
+.ui-workbench-action-list-item[data-unavailable='true'] .ui-workbench-action-list-item__status-dot {
+  background: color-mix(in srgb, var(--color-text-subtle) 36%, transparent);
+}
+
+.ui-workbench-action-list-item--danger {
+  color: var(--color-danger);
+}
+
+.ui-workbench-action-list-item--danger .ui-workbench-action-list-item__icon {
+  color: var(--color-danger);
+}
+
+.ui-workbench-action-list-item:disabled {
+  color: var(--color-text-subtle);
+  cursor: default;
+}
+
+.ui-workbench-action-list-item:disabled:hover {
+  background: transparent;
+}
+
+.ui-workbench-action-list-item:disabled .ui-workbench-action-list-item__icon,
+.ui-workbench-action-list-item:disabled .ui-workbench-action-list-item__description,
+.ui-workbench-action-list-item:disabled .ui-workbench-action-list-item__shortcut {
+  color: var(--color-text-subtle);
+}

package/src/workbench/views/artifact-preview.css

@@ -0,0 +1,184 @@
+.ui-workbench-artifact-shell {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  color: var(--color-text);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+}
+
+.ui-workbench-artifact-shell[data-header='hidden'] {
+  grid-template-rows: minmax(0, 1fr);
+  border: 0;
+}
+
+.ui-workbench-artifact-shell__header {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 10px 6px 12px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--panel-bg, var(--color-bg));
+}
+
+.ui-workbench-artifact-shell__title-group {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.ui-workbench-artifact-shell__title,
+.ui-workbench-artifact-shell__path {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-artifact-shell__title {
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.ui-workbench-artifact-shell__path {
+  color: var(--color-text-subtle);
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.ui-workbench-artifact-shell__meta {
+  min-width: 0;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.ui-workbench-artifact-shell__chip {
+  max-width: 180px;
+  padding: 2px 7px;
+  overflow: hidden;
+  color: var(--color-text-muted);
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-artifact-shell__modes {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ui-workbench-artifact-shell__mode.ui-icon-button {
+  width: 28px;
+  height: 28px;
+}
+
+.ui-workbench-artifact-shell__mode--active.ui-icon-button,
+.ui-workbench-artifact-shell__mode[aria-pressed='true'] {
+  color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
+}
+
+.ui-workbench-artifact-shell__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-workbench-artifact-shell__pane,
+.ui-workbench-artifact-preview {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ui-workbench-artifact-shell__split.ui-workbench-split-view {
+  flex: 1 1 auto;
+  height: 100%;
+  min-height: 0;
+}
+
+.ui-workbench-artifact-shell__split .ui-workbench-split-view__primary,
+.ui-workbench-artifact-shell__split .ui-workbench-split-view__secondary {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-workbench-artifact-shell__code {
+  min-height: 100%;
+  margin: 0;
+  padding: 14px 16px;
+  overflow: auto;
+  color: var(--color-text);
+  background: var(--panel-bg, var(--color-bg));
+  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre;
+}
+
+.ui-workbench-artifact-shell__code code {
+  font: inherit;
+}
+
+.ui-workbench-artifact-story-preview {
+  min-height: 100%;
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding: 18px;
+  color: var(--color-text);
+  background: var(--color-surface);
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
+}
+
+.ui-workbench-artifact-story-preview pre {
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  color: var(--color-text-muted);
+  background: var(--panel-bg, var(--color-bg));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
+  font-size: 12px;
+}
+
+.ui-workbench-artifact-story-diagram {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.ui-workbench-artifact-story-diagram span {
+  min-height: 64px;
+  display: grid;
+  place-items: center;
+  color: var(--color-text);
+  background: var(--panel-bg, var(--color-bg));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+}

package/src/workbench/views/command-inspector.css

@@ -0,0 +1,98 @@
+.workbench-command-inspector-surface {
+  height: 100%;
+  min-height: 0;
+}
+
+.workbench-command-inspector-surface__missing {
+  display: grid;
+  gap: 8px;
+  padding: 24px;
+}
+
+.workbench-command-inspector-surface__missing-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.workbench-command-inspector-surface__missing-message {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
+.workbench-command-inspector {
+  padding: 16px 20px 24px;
+}
+
+.workbench-command-inspector__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.workbench-command-inspector__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.workbench-command-inspector__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 12px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.workbench-command-inspector__status--running {
+  color: var(--color-text);
+}
+
+.workbench-command-inspector__status--error {
+  color: var(--color-danger, #f14c4c);
+}
+
+.workbench-command-inspector__details {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+}
+
+.workbench-command-inspector__detail {
+  display: grid;
+  gap: 4px;
+}
+
+.workbench-command-inspector__detail dt {
+  margin: 0;
+  color: var(--color-text-subtle);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.workbench-command-inspector__detail dd {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.workbench-command-inspector__detail code,
+.workbench-command-inspector__detail kbd {
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-size: 12px;
+}
+
+.workbench-command-inspector__subtle {
+  color: var(--color-text-muted);
+}
+
+.workbench-command-inspector__menu-list {
+  margin: 0;
+  padding-left: 18px;
+}