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

package/src/workbench/chrome/workbench-platform-chrome.css

@@ -0,0 +1,142 @@
+[data-workbench-platform='darwin'] {
+  --shell-window-chrome-radius: 10px;
+  --shell-window-chrome-titlebar-height: 38px;
+  --shell-window-chrome-control-gap: 8px;
+  --shell-window-chrome-traffic-light-size: 12px;
+}
+
+[data-workbench-platform='win32'],
+[data-workbench-platform='linux'] {
+  --shell-window-chrome-radius: var(--radius-sm);
+  --shell-window-chrome-titlebar-height: 34px;
+  --shell-window-chrome-control-gap: 2px;
+}
+
+[data-workbench-window-chrome='platform'].ui-modal:not([data-maximized='true']) {
+  border-radius: var(--shell-window-chrome-radius);
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform'].ui-modal:not([data-maximized='true']) {
+  overflow: hidden;
+}
+
+[data-workbench-window-chrome='platform'] .ui-modal__titlebar,
+[data-workbench-window-chrome='platform'] .ui-workbench-desktop-titlebar {
+  min-height: var(--shell-window-chrome-titlebar-height);
+  height: var(--shell-window-chrome-titlebar-height);
+}
+
+[data-workbench-platform='darwin'] [data-workbench-window-chrome='platform'] .ui-modal__titlebar {
+  padding: 0;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-modal__titlebar-drag {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 16px;
+}
+
+[data-workbench-platform='darwin'] [data-workbench-window-chrome='platform'] .ui-modal__title {
+  justify-content: center;
+  text-align: center;
+}
+
+.ui-workbench-window-chrome-controls--darwin {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--shell-window-chrome-control-gap, 8px);
+  padding: 0 12px;
+  -webkit-app-region: no-drag;
+}
+
+.ui-workbench-window-chrome-controls--darwin.ui-workbench-window-chrome-controls--modal {
+  align-self: stretch;
+}
+
+.ui-workbench-window-chrome-control--darwin {
+  width: var(--shell-window-chrome-traffic-light-size, 12px);
+  height: var(--shell-window-chrome-traffic-light-size, 12px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.ui-workbench-window-chrome-control--darwin .ui-workbench-window-chrome-control__glyph {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.ui-workbench-window-chrome-control--close.ui-workbench-window-chrome-control--darwin {
+  background: #ff5f57;
+}
+
+.ui-workbench-window-chrome-control--minimize.ui-workbench-window-chrome-control--darwin {
+  background: #febc2e;
+}
+
+.ui-workbench-window-chrome-control--zoom.ui-workbench-window-chrome-control--darwin {
+  background: #28c840;
+}
+
+.ui-workbench-window-chrome-controls--darwin:hover .ui-workbench-window-chrome-control__glyph,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control__glyph {
+  color: rgba(0, 0, 0, 0.55);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.ui-workbench-window-chrome-control--close.ui-workbench-window-chrome-control--darwin:hover
+  .ui-workbench-window-chrome-control__glyph::before,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control--close
+  .ui-workbench-window-chrome-control__glyph::before {
+  content: '×';
+}
+
+.ui-workbench-window-chrome-control--minimize.ui-workbench-window-chrome-control--darwin:hover
+  .ui-workbench-window-chrome-control__glyph::before,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control--minimize
+  .ui-workbench-window-chrome-control__glyph::before {
+  content: '−';
+}
+
+.ui-workbench-window-chrome-control--zoom.ui-workbench-window-chrome-control--darwin:hover
+  .ui-workbench-window-chrome-control__glyph::before,
+.ui-workbench-window-chrome-controls--darwin:focus-within
+  .ui-workbench-window-chrome-control--zoom
+  .ui-workbench-window-chrome-control__glyph::before {
+  content: '+';
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-workbench-desktop-titlebar {
+  gap: 0;
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-workbench-desktop-titlebar__leading {
+  padding-left: 0;
+}
+
+[data-workbench-platform='darwin']
+  [data-workbench-window-chrome='platform']
+  .ui-workbench-desktop-titlebar__trailing
+  .ui-workbench-window-chrome-controls--darwin {
+  display: none;
+}

package/src/workbench/chrome/workbench-shell-titlebar.css

@@ -0,0 +1,124 @@
+.ui-workbench-titlebar {
+  box-sizing: border-box;
+  flex: 0 0 var(--workbench-header-height);
+  min-height: var(--workbench-header-height);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px;
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+  background: var(--vscode-titleBar-activeBackground, var(--color-surface));
+  border-bottom: 1px solid var(--vscode-titleBar-border, var(--color-border));
+  user-select: none;
+}
+
+.workbench-shell-titlebar__identity,
+.workbench-shell-titlebar__actions {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.workbench-shell-titlebar__identity {
+  flex: 1 1 auto;
+  gap: 6px;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+}
+
+.workbench-shell-titlebar__identity > .codicon {
+  flex: 0 0 auto;
+  color: var(--vscode-icon-foreground, var(--color-text-muted));
+  font-size: 15px;
+}
+
+.workbench-shell-titlebar__app-icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  padding: 5px;
+  overflow: visible;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.workbench-shell-titlebar__app-icon > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-shrink: 0;
+  object-fit: contain;
+  object-position: center;
+}
+
+.workbench-shell-titlebar__app-icon > .tilepaper-app-icon,
+.workbench-shell-titlebar__app-icon > svg {
+  shape-rendering: geometricPrecision;
+}
+
+.tilepaper-app-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.workbench-shell-titlebar__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-shell-titlebar__meta {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.workbench-shell-titlebar__actions {
+  flex: 0 0 auto;
+  gap: 6px;
+}
+
+.workbench-shell-titlebar__layout-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 0 auto;
+}
+
+.workbench-shell-titlebar__layout-control.ui-icon-button {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text-muted));
+}
+
+.workbench-shell-titlebar__layout-control.ui-icon-button:hover {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+}
+
+.workbench-shell-titlebar__layout-control--active.ui-icon-button {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+  background: color-mix(
+    in srgb,
+    var(--vscode-titleBar-activeForeground, var(--color-text)) 10%,
+    transparent
+  );
+}
+
+.workbench-shell-titlebar__action.ui-icon-button {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text-muted));
+}
+
+.workbench-shell-titlebar__action.ui-icon-button:hover {
+  color: var(--vscode-titleBar-activeForeground, var(--color-text));
+}

package/src/workbench/chrome/workbenchModalViewState.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export interface UseWorkbenchModalViewStateOptions<TViewId extends string> {
+  readonly activeViewId: TViewId;
+  readonly fallbackViewId: TViewId;
+  readonly modalViewId: TViewId;
+  readonly openView: (viewId: TViewId) => void;
+}
+
+export interface WorkbenchModalViewState<TViewId extends string> {
+  readonly closeModalView: () => void;
+  readonly isModalViewActive: boolean;
+  readonly isModalViewOpen: boolean;
+  readonly openModalView: () => void;
+  readonly viewId: TViewId;
+}
+
+export function useWorkbenchModalViewState<TViewId extends string>({
+  activeViewId,
+  fallbackViewId,
+  modalViewId,
+  openView,
+}: UseWorkbenchModalViewStateOptions<TViewId>): WorkbenchModalViewState<TViewId> {
+  const isModalViewActive = activeViewId === modalViewId;
+  const [isModalViewOpen, setModalViewOpen] = useState(isModalViewActive);
+
+  useEffect(() => {
+    if (isModalViewActive) {
+      setModalViewOpen(true);
+    }
+  }, [isModalViewActive]);
+
+  const openModalView = useCallback((): void => {
+    setModalViewOpen(true);
+  }, []);
+
+  const closeModalView = useCallback((): void => {
+    setModalViewOpen(false);
+
+    if (isModalViewActive) {
+      openView(fallbackViewId);
+    }
+  }, [fallbackViewId, isModalViewActive, openView]);
+
+  return {
+    closeModalView,
+    isModalViewActive,
+    isModalViewOpen,
+    openModalView,
+    viewId: modalViewId,
+  };
+}

package/src/workbench/chrome/workbenchOverlaysContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+const WorkbenchOverlaysContext = createContext<HTMLElement | null>(null);
+
+export function WorkbenchOverlaysProvider({
+  children,
+  container,
+}: {
+  children: ReactNode;
+  container: HTMLElement | null;
+}): ReactNode {
+  return (
+    <WorkbenchOverlaysContext.Provider value={container}>
+      {children}
+    </WorkbenchOverlaysContext.Provider>
+  );
+}
+
+export function useWorkbenchOverlaysContainer(): HTMLElement | null {
+  return useContext(WorkbenchOverlaysContext);
+}

package/src/workbench/chrome/workbenchPlatformChrome.ts

@@ -0,0 +1,40 @@
+export type WorkbenchHostPlatform = 'darwin' | 'win32' | 'linux';
+
+export type WorkbenchWindowChromeMode = 'platform' | 'generic';
+
+export function resolveWorkbenchHostPlatform(
+  platformOverride?: WorkbenchHostPlatform | null,
+): WorkbenchHostPlatform {
+  if (platformOverride) {
+    return platformOverride;
+  }
+
+  if (typeof navigator === 'undefined') {
+    return 'win32';
+  }
+
+  const platform = navigator.platform?.toLowerCase() ?? '';
+  const userAgent = navigator.userAgent?.toLowerCase() ?? '';
+
+  if (platform.includes('mac') || userAgent.includes('mac')) {
+    return 'darwin';
+  }
+
+  if (platform.includes('linux') || userAgent.includes('linux')) {
+    return 'linux';
+  }
+
+  return 'win32';
+}
+
+export function resolveWorkbenchWindowChromeDataAttributes(
+  chrome: WorkbenchWindowChromeMode = 'platform',
+): Record<string, string> | undefined {
+  if (chrome !== 'platform') {
+    return undefined;
+  }
+
+  return {
+    'data-workbench-window-chrome': 'platform',
+  };
+}

package/src/workbench/command-palette/command-palette.css

@@ -0,0 +1,156 @@
+.ui-workbench-command-palette-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 250;
+  display: grid;
+  align-items: start;
+  justify-items: center;
+  padding: 7vh 24px 24px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.ui-workbench-command-palette {
+  width: min(640px, calc(100vw - 48px));
+  max-height: min(560px, calc(100vh - 96px));
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+}
+
+.ui-workbench-command-palette__header {
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px 0 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ui-workbench-command-palette__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ui-workbench-command-palette__close {
+  --ui-icon-button-width: var(--workbench-command-palette-close-size);
+  --ui-icon-button-height: var(--workbench-command-palette-close-size);
+  --ui-icon-button-flex-shrink: 0;
+  --ui-icon-button-padding: 0;
+  --ui-icon-button-border: 0;
+  --ui-icon-button-border-radius: var(--radius-sm);
+  --ui-icon-button-color: var(--color-text-muted);
+  --ui-icon-button-background: transparent;
+  --ui-icon-button-hover-color: var(--color-text);
+  --ui-icon-button-hover-background: var(--color-surface-hover);
+  width: var(--workbench-command-palette-close-size);
+  height: var(--workbench-command-palette-close-size);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-workbench-command-palette__close:hover,
+.ui-workbench-command-palette__close:focus-visible {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+  outline: none;
+}
+
+.ui-workbench-command-palette__search {
+  height: 42px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-subtle);
+}
+
+.ui-workbench-command-palette__input {
+  --ui-input-width: 100%;
+  --ui-input-min-width: 0;
+  --ui-input-height: var(--workbench-command-palette-input-height);
+  --ui-input-padding: 0;
+  --ui-input-border: 0;
+  --ui-input-color: var(--color-text);
+  --ui-input-background: transparent;
+  --ui-input-font-family: var(--font-sans);
+  --ui-input-font-size: 14px;
+  --ui-input-line-height: 1.4;
+  --ui-input-focus-border-color: transparent;
+  min-width: 0;
+  height: var(--workbench-command-palette-input-height);
+  padding: 0;
+  border: 0;
+  color: var(--color-text);
+  background: transparent;
+  font: 14px/1.4 var(--font-sans);
+}
+
+.ui-workbench-command-palette__input:focus {
+  outline: none;
+}
+
+.ui-workbench-command-palette__input::placeholder {
+  color: var(--color-text-subtle);
+}
+
+@media (max-width: 640px) {
+  .ui-workbench-command-palette-overlay {
+    padding: 16px 12px;
+  }
+
+  .ui-workbench-command-palette {
+    width: 100%;
+    max-height: calc(100vh - 32px);
+  }
+
+  .ui-workbench-command-group-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ui-workbench-command-group-shell__nav {
+    max-height: none;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .ui-workbench-command-group-shell__nav-link {
+    flex: 0 0 auto;
+  }
+
+  .ui-workbench-command-group-shell__content {
+    max-height: calc(100vh - 220px);
+  }
+
+  .ui-workbench-command-item {
+    grid-template-columns: 22px minmax(0, 1fr);
+  }
+
+  .ui-workbench-command-item__meta {
+    grid-column: 2;
+    justify-content: flex-start;
+  }
+}

package/src/workbench/commands/CommandGroupShell.tsx

@@ -0,0 +1,131 @@
+import { useId, useMemo, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { EmptyState } from '../../primitives/empty-state';
+import { cx } from '../../utils/cx';
+import { WorkbenchCommandList } from './CommandList';
+import {
+  filterWorkbenchCommands,
+  groupWorkbenchCommands,
+  type WorkbenchCommandDescriptor,
+  type WorkbenchCommandGroupBy,
+  type WorkbenchCommandRunContext,
+} from './command-model';
+
+export interface WorkbenchCommandGroupShellProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onSelect'
+> {
+  activeCommandId?: string | undefined;
+  commands: readonly WorkbenchCommandDescriptor[];
+  emptyLabel?: ReactNode | undefined;
+  fallbackGroupLabel?: string | undefined;
+  groupBy?: WorkbenchCommandGroupBy | undefined;
+  groupNavLabel?: string | undefined;
+  onActiveCommandChange?: ((commandId: string) => void) | undefined;
+  onRunCommand?:
+    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
+    | undefined;
+  query?: string | undefined;
+  showGroupCounts?: boolean | undefined;
+  showGroupNav?: boolean | undefined;
+}
+
+export function WorkbenchCommandGroupShell({
+  activeCommandId,
+  className,
+  commands,
+  emptyLabel = 'No commands available',
+  fallbackGroupLabel = 'Other',
+  groupBy = 'category',
+  groupNavLabel = 'Command groups',
+  onActiveCommandChange,
+  onRunCommand,
+  query = '',
+  showGroupCounts = true,
+  showGroupNav = true,
+  ...props
+}: WorkbenchCommandGroupShellProps) {
+  const generatedId = useId().replace(/:/g, '');
+  const filteredCommands = useMemo(
+    () => filterWorkbenchCommands({ commands, query }),
+    [commands, query],
+  );
+  const groups = useMemo(
+    () => groupWorkbenchCommands({ commands: filteredCommands, fallbackGroupLabel, groupBy }),
+    [fallbackGroupLabel, filteredCommands, groupBy],
+  );
+
+  if (groups.length === 0) {
+    return (
+      <div
+        className={cx('ui-workbench-command-group-shell', className)}
+        data-show-group-nav={showGroupNav ? 'true' : 'false'}
+        {...props}
+      >
+        <EmptyState compact icon="codicon-symbol-keyword">
+          {emptyLabel}
+        </EmptyState>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cx('ui-workbench-command-group-shell', className)}
+      data-show-group-nav={showGroupNav ? 'true' : 'false'}
+      {...props}
+    >
+      {showGroupNav ? (
+        <nav
+          aria-label={groupNavLabel}
+          className="ui-workbench-command-group-shell__nav ui-workbench-scrollbar"
+        >
+          {groups.map((group) => (
+            <a
+              key={group.id}
+              className="ui-workbench-command-group-shell__nav-link"
+              href={`#${generatedId}-${group.id}`}
+            >
+              <span>{group.label}</span>
+              {showGroupCounts ? <em>{group.commands.length}</em> : null}
+            </a>
+          ))}
+        </nav>
+      ) : null}
+      <div className="ui-workbench-command-group-shell__content ui-workbench-scrollbar">
+        {groups.map((group) => {
+          const titleId = `${generatedId}-${group.id}-title`;
+
+          return (
+            <section
+              key={group.id}
+              id={`${generatedId}-${group.id}`}
+              className="ui-workbench-command-group-shell__section"
+              aria-labelledby={titleId}
+            >
+              <div className="ui-workbench-command-group-shell__section-header">
+                <h2 id={titleId}>{group.label}</h2>
+                {showGroupCounts ? <span>{group.commands.length}</span> : null}
+              </div>
+              <WorkbenchCommandList
+                activeCommandId={activeCommandId}
+                aria-label={`${group.label} commands`}
+                commands={group.commands}
+                emptyLabel={emptyLabel}
+                query={query}
+                source="grouped-list"
+                onActiveCommandChange={onActiveCommandChange}
+                onRunCommand={(command, context) =>
+                  onRunCommand?.(command, {
+                    ...context,
+                    groupId: group.id,
+                    groupLabel: group.label,
+                  })
+                }
+              />
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}