@workbench-kit/react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/workbench/chat/useSlashCommandSuggest.ts

@@ -1,154 +1,154 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import type { KeyboardEvent } from 'react';
-import {
-  filterWorkbenchCommands,
-  getNextWorkbenchCommandIndex,
-  isWorkbenchCommandRunnable,
-  type WorkbenchCommandDescriptor,
-} from '../CommandPalette';
-import { getSlashCommandQuery, isSlashCommandInput } from './slashCommand';
-
-type SlashCommandSuggestKeyboardEvent = Pick<
-  KeyboardEvent,
-  'key' | 'preventDefault' | 'shiftKey' | 'stopPropagation'
->;
-
-export interface UseSlashCommandSuggestOptions {
-  commands: readonly WorkbenchCommandDescriptor[];
-  limit?: number;
-  value: string;
-}
-
-export interface UseSlashCommandSuggestResult {
-  activeCommand: WorkbenchCommandDescriptor | undefined;
-  activeCommandId: string | undefined;
-  activeCommandIndex: number;
-  commandQuery: string;
-  isOpen: boolean;
-  suggestedCommands: readonly WorkbenchCommandDescriptor[];
-  handleKeyDown: (
-    event: SlashCommandSuggestKeyboardEvent,
-    onSelect: (commandId: string) => void,
-  ) => void;
-  setActiveCommandByKey: (commandId: string) => void;
-  setActiveCommandIndex: (index: number) => void;
-}
-
-export function useSlashCommandSuggest({
-  commands,
-  limit = 8,
-  value,
-}: UseSlashCommandSuggestOptions): UseSlashCommandSuggestResult {
-  const [activeCommandIndex, setActiveCommandIndex] = useState(0);
-
-  const isOpen = isSlashCommandInput(value);
-  const commandQuery = getSlashCommandQuery(value);
-
-  const suggestedCommands = useMemo(
-    () => (isOpen ? filterWorkbenchCommands({ commands, limit, query: commandQuery }) : []),
-    [commands, commandQuery, isOpen, limit],
-  );
-
-  const resolvedActiveIndex =
-    suggestedCommands.length > 0 ? Math.min(activeCommandIndex, suggestedCommands.length - 1) : -1;
-  const activeCommand =
-    resolvedActiveIndex >= 0 ? suggestedCommands[resolvedActiveIndex] : undefined;
-  const activeCommandId = activeCommand?.id;
-
-  useEffect(() => {
-    setActiveCommandIndex(0);
-  }, [commandQuery, isOpen]);
-
-  const handleKeyDown = useCallback(
-    (event: SlashCommandSuggestKeyboardEvent, onSelect: (commandId: string) => void) => {
-      if (!isOpen) return;
-
-      if (
-        event.key === 'ArrowDown' ||
-        event.key === 'ArrowUp' ||
-        event.key === 'Home' ||
-        event.key === 'End' ||
-        event.key === 'PageDown' ||
-        event.key === 'PageUp'
-      ) {
-        const direction =
-          event.key === 'ArrowUp' || event.key === 'End' || event.key === 'PageUp'
-            ? 'previous'
-            : 'next';
-        const stepCount = event.key === 'PageDown' || event.key === 'PageUp' ? 5 : 1;
-
-        event.preventDefault();
-        event.stopPropagation();
-        setActiveCommandIndex((current) => {
-          let nextIndex =
-            event.key === 'Home'
-              ? getNextWorkbenchCommandIndex({
-                  commands: suggestedCommands,
-                  currentIndex: -1,
-                  direction: 'next',
-                })
-              : event.key === 'End'
-                ? getNextWorkbenchCommandIndex({
-                    commands: suggestedCommands,
-                    currentIndex: 0,
-                    direction: 'previous',
-                  })
-                : current;
-
-          if (nextIndex < 0) {
-            nextIndex = suggestedCommands.findIndex((command) =>
-              isWorkbenchCommandRunnable(command),
-            );
-          }
-
-          if (event.key !== 'Home' && event.key !== 'End') {
-            for (let step = 0; step < stepCount; step += 1) {
-              const steppedIndex = getNextWorkbenchCommandIndex({
-                commands: suggestedCommands,
-                currentIndex: nextIndex,
-                direction,
-              });
-
-              if (steppedIndex < 0 || steppedIndex === nextIndex) break;
-              nextIndex = steppedIndex;
-            }
-          }
-
-          return nextIndex < 0 ? current : nextIndex;
-        });
-        return;
-      }
-
-      if (
-        (event.key === 'Enter' && !event.shiftKey && activeCommand) ||
-        (event.key === 'Tab' && activeCommand)
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-        onSelect(activeCommand.id);
-        return;
-      }
-    },
-    [activeCommand, isOpen, suggestedCommands],
-  );
-
-  const setActiveCommandByKey = useCallback(
-    (commandId: string) => {
-      const index = suggestedCommands.findIndex((cmd) => cmd.id === commandId);
-      setActiveCommandIndex(Math.max(0, index));
-    },
-    [suggestedCommands],
-  );
-
-  return {
-    activeCommand,
-    activeCommandId,
-    activeCommandIndex: resolvedActiveIndex,
-    commandQuery,
-    handleKeyDown,
-    isOpen,
-    setActiveCommandByKey,
-    setActiveCommandIndex,
-    suggestedCommands,
-  };
-}
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import {
+  filterWorkbenchCommands,
+  getNextWorkbenchCommandIndex,
+  isWorkbenchCommandRunnable,
+  type WorkbenchCommandDescriptor,
+} from '../commands/CommandPalette';
+import { getSlashCommandQuery, isSlashCommandInput } from './slashCommand';
+
+type SlashCommandSuggestKeyboardEvent = Pick<
+  KeyboardEvent,
+  'key' | 'preventDefault' | 'shiftKey' | 'stopPropagation'
+>;
+
+export interface UseSlashCommandSuggestOptions {
+  commands: readonly WorkbenchCommandDescriptor[];
+  limit?: number;
+  value: string;
+}
+
+export interface UseSlashCommandSuggestResult {
+  activeCommand: WorkbenchCommandDescriptor | undefined;
+  activeCommandId: string | undefined;
+  activeCommandIndex: number;
+  commandQuery: string;
+  isOpen: boolean;
+  suggestedCommands: readonly WorkbenchCommandDescriptor[];
+  handleKeyDown: (
+    event: SlashCommandSuggestKeyboardEvent,
+    onSelect: (commandId: string) => void,
+  ) => void;
+  setActiveCommandByKey: (commandId: string) => void;
+  setActiveCommandIndex: (index: number) => void;
+}
+
+export function useSlashCommandSuggest({
+  commands,
+  limit = 8,
+  value,
+}: UseSlashCommandSuggestOptions): UseSlashCommandSuggestResult {
+  const [activeCommandIndex, setActiveCommandIndex] = useState(0);
+
+  const isOpen = isSlashCommandInput(value);
+  const commandQuery = getSlashCommandQuery(value);
+
+  const suggestedCommands = useMemo(
+    () => (isOpen ? filterWorkbenchCommands({ commands, limit, query: commandQuery }) : []),
+    [commands, commandQuery, isOpen, limit],
+  );
+
+  const resolvedActiveIndex =
+    suggestedCommands.length > 0 ? Math.min(activeCommandIndex, suggestedCommands.length - 1) : -1;
+  const activeCommand =
+    resolvedActiveIndex >= 0 ? suggestedCommands[resolvedActiveIndex] : undefined;
+  const activeCommandId = activeCommand?.id;
+
+  useEffect(() => {
+    setActiveCommandIndex(0);
+  }, [commandQuery, isOpen]);
+
+  const handleKeyDown = useCallback(
+    (event: SlashCommandSuggestKeyboardEvent, onSelect: (commandId: string) => void) => {
+      if (!isOpen) return;
+
+      if (
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowUp' ||
+        event.key === 'Home' ||
+        event.key === 'End' ||
+        event.key === 'PageDown' ||
+        event.key === 'PageUp'
+      ) {
+        const direction =
+          event.key === 'ArrowUp' || event.key === 'End' || event.key === 'PageUp'
+            ? 'previous'
+            : 'next';
+        const stepCount = event.key === 'PageDown' || event.key === 'PageUp' ? 5 : 1;
+
+        event.preventDefault();
+        event.stopPropagation();
+        setActiveCommandIndex((current) => {
+          let nextIndex =
+            event.key === 'Home'
+              ? getNextWorkbenchCommandIndex({
+                  commands: suggestedCommands,
+                  currentIndex: -1,
+                  direction: 'next',
+                })
+              : event.key === 'End'
+                ? getNextWorkbenchCommandIndex({
+                    commands: suggestedCommands,
+                    currentIndex: 0,
+                    direction: 'previous',
+                  })
+                : current;
+
+          if (nextIndex < 0) {
+            nextIndex = suggestedCommands.findIndex((command) =>
+              isWorkbenchCommandRunnable(command),
+            );
+          }
+
+          if (event.key !== 'Home' && event.key !== 'End') {
+            for (let step = 0; step < stepCount; step += 1) {
+              const steppedIndex = getNextWorkbenchCommandIndex({
+                commands: suggestedCommands,
+                currentIndex: nextIndex,
+                direction,
+              });
+
+              if (steppedIndex < 0 || steppedIndex === nextIndex) break;
+              nextIndex = steppedIndex;
+            }
+          }
+
+          return nextIndex < 0 ? current : nextIndex;
+        });
+        return;
+      }
+
+      if (
+        (event.key === 'Enter' && !event.shiftKey && activeCommand) ||
+        (event.key === 'Tab' && activeCommand)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(activeCommand.id);
+        return;
+      }
+    },
+    [activeCommand, isOpen, suggestedCommands],
+  );
+
+  const setActiveCommandByKey = useCallback(
+    (commandId: string) => {
+      const index = suggestedCommands.findIndex((cmd) => cmd.id === commandId);
+      setActiveCommandIndex(Math.max(0, index));
+    },
+    [suggestedCommands],
+  );
+
+  return {
+    activeCommand,
+    activeCommandId,
+    activeCommandIndex: resolvedActiveIndex,
+    commandQuery,
+    handleKeyDown,
+    isOpen,
+    setActiveCommandByKey,
+    setActiveCommandIndex,
+    suggestedCommands,
+  };
+}

package/src/workbench/{WorkbenchModalPortal.tsx → chrome/WorkbenchModalPortal.tsx}

@@ -1,52 +1,52 @@
-import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-import { WORKBENCH_OVERLAYS_CLASS } from '../modal/modalContainer';
-import { useWorkbenchOverlaysContainer } from './workbenchOverlaysContext';
-
-export interface WorkbenchModalPortalProps {
-  readonly children: ReactNode;
-}
-
-type WorkbenchModalPlacement = 'pending' | 'in-place' | 'portal';
-
-/**
- * Portals modal chrome into `.ide-workbench-overlays` when the dialog is rendered
- * outside that surface (e.g. via a host state hook). When already mounted inside
- * overlays, children render in place so containment sizing stays correct.
- */
-export function WorkbenchModalPortal({ children }: WorkbenchModalPortalProps): ReactNode {
-  const overlaysContainer = useWorkbenchOverlaysContainer();
-  const hostRef = useRef<HTMLSpanElement>(null);
-  const [placement, setPlacement] = useState<WorkbenchModalPlacement>('pending');
-
-  useLayoutEffect(() => {
-    const host = hostRef.current;
-    if (host === null || overlaysContainer === null) {
-      setPlacement('pending');
-      return;
-    }
-
-    const insideOverlays = host.closest(`.${WORKBENCH_OVERLAYS_CLASS}`) !== null;
-    setPlacement(insideOverlays ? 'in-place' : 'portal');
-  }, [overlaysContainer]);
-
-  if (placement === 'portal') {
-    return (
-      <>
-        <span ref={hostRef} aria-hidden className="workbench-modal-portal-host" hidden />
-        {createPortal(children, overlaysContainer!)}
-      </>
-    );
-  }
-
-  if (placement === 'in-place') {
-    return (
-      <span ref={hostRef} className="workbench-modal-portal-host">
-        {children}
-      </span>
-    );
-  }
-
-  return <span ref={hostRef} aria-hidden className="workbench-modal-portal-host" hidden />;
-}
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import { WORKBENCH_OVERLAYS_CLASS } from '../../modal/modalContainer';
+import { useWorkbenchOverlaysContainer } from './workbenchOverlaysContext';
+
+export interface WorkbenchModalPortalProps {
+  readonly children: ReactNode;
+}
+
+type WorkbenchModalPlacement = 'pending' | 'in-place' | 'portal';
+
+/**
+ * Portals modal chrome into `.ide-workbench-overlays` when the dialog is rendered
+ * outside that surface (e.g. via a host state hook). When already mounted inside
+ * overlays, children render in place so containment sizing stays correct.
+ */
+export function WorkbenchModalPortal({ children }: WorkbenchModalPortalProps): ReactNode {
+  const overlaysContainer = useWorkbenchOverlaysContainer();
+  const hostRef = useRef<HTMLSpanElement>(null);
+  const [placement, setPlacement] = useState<WorkbenchModalPlacement>('pending');
+
+  useLayoutEffect(() => {
+    const host = hostRef.current;
+    if (host === null || overlaysContainer === null) {
+      setPlacement('pending');
+      return;
+    }
+
+    const insideOverlays = host.closest(`.${WORKBENCH_OVERLAYS_CLASS}`) !== null;
+    setPlacement(insideOverlays ? 'in-place' : 'portal');
+  }, [overlaysContainer]);
+
+  if (placement === 'portal') {
+    return (
+      <>
+        <span ref={hostRef} aria-hidden className="workbench-modal-portal-host" hidden />
+        {createPortal(children, overlaysContainer!)}
+      </>
+    );
+  }
+
+  if (placement === 'in-place') {
+    return (
+      <span ref={hostRef} className="workbench-modal-portal-host">
+        {children}
+      </span>
+    );
+  }
+
+  return <span ref={hostRef} aria-hidden className="workbench-modal-portal-host" hidden />;
+}

package/src/workbench/{WorkbenchPlatformContext.tsx → chrome/WorkbenchPlatformContext.tsx}

@@ -1,31 +1,31 @@
-import { createContext, useContext, type ReactNode } from 'react';
-
-import {
-  resolveWorkbenchHostPlatform,
-  type WorkbenchHostPlatform,
-} from './workbenchPlatformChrome';
-
-const WorkbenchPlatformContext = createContext<WorkbenchHostPlatform | null>(null);
-
-export interface WorkbenchPlatformProviderProps {
-  children: ReactNode;
-  platform?: WorkbenchHostPlatform | undefined;
-}
-
-export function WorkbenchPlatformProvider({
-  children,
-  platform,
-}: WorkbenchPlatformProviderProps): ReactNode {
-  const resolvedPlatform = resolveWorkbenchHostPlatform(platform ?? null);
-
-  return (
-    <WorkbenchPlatformContext.Provider value={resolvedPlatform}>
-      {children}
-    </WorkbenchPlatformContext.Provider>
-  );
-}
-
-export function useWorkbenchHostPlatform(): WorkbenchHostPlatform {
-  const platformFromContext = useContext(WorkbenchPlatformContext);
-  return resolveWorkbenchHostPlatform(platformFromContext);
-}
+import { createContext, useContext, type ReactNode } from 'react';
+
+import {
+  resolveWorkbenchHostPlatform,
+  type WorkbenchHostPlatform,
+} from './workbenchPlatformChrome';
+
+const WorkbenchPlatformContext = createContext<WorkbenchHostPlatform | null>(null);
+
+export interface WorkbenchPlatformProviderProps {
+  children: ReactNode;
+  platform?: WorkbenchHostPlatform | undefined;
+}
+
+export function WorkbenchPlatformProvider({
+  children,
+  platform,
+}: WorkbenchPlatformProviderProps): ReactNode {
+  const resolvedPlatform = resolveWorkbenchHostPlatform(platform ?? null);
+
+  return (
+    <WorkbenchPlatformContext.Provider value={resolvedPlatform}>
+      {children}
+    </WorkbenchPlatformContext.Provider>
+  );
+}
+
+export function useWorkbenchHostPlatform(): WorkbenchHostPlatform {
+  const platformFromContext = useContext(WorkbenchPlatformContext);
+  return resolveWorkbenchHostPlatform(platformFromContext);
+}

package/src/workbench/chrome/index.css

@@ -1,6 +1,6 @@
-/* workbench/chrome feature styles */
-@import './workbench-desktop-titlebar.css';
-@import './workbench-host.css';
-@import './workbench-layout-regions.css';
-@import './workbench-platform-chrome.css';
-@import './workbench-shell-titlebar.css';
+/* workbench/chrome feature styles */
+@import './workbench-desktop-titlebar.css';
+@import './workbench-host.css';
+@import './workbench-layout-regions.css';
+@import './workbench-platform-chrome.css';
+@import './workbench-shell-titlebar.css';

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

@@ -0,0 +1,4 @@
+/* Workbench shell and platform chrome */
+@import '../shell/index.css';
+@import './index.css';
+@import '../command-palette/command-palette.css';

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

@@ -1,60 +1,60 @@
-.ui-workbench-desktop-titlebar {
-  -webkit-app-region: drag;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.ui-workbench-desktop-titlebar__leading,
-.ui-workbench-desktop-titlebar__center,
-.ui-workbench-desktop-titlebar__trailing {
-  -webkit-app-region: no-drag;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.ui-workbench-desktop-titlebar__center {
-  flex: 1 1 auto;
-  justify-content: center;
-}
-
-.ui-workbench-desktop-titlebar__trailing {
-  flex: 0 0 auto;
-}
-
-.ui-workbench-desktop-titlebar__controls {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.ui-workbench-desktop-titlebar__control {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-  background: transparent;
-  cursor: pointer;
-}
-
-.ui-workbench-desktop-titlebar__control:hover {
-  color: var(--color-text);
-  background: var(--color-surface-hover);
-}
-
-.ui-workbench-desktop-titlebar__control--close:hover {
-  color: #ffffff;
-  background: var(--color-danger);
-}
+.ui-workbench-desktop-titlebar {
+  -webkit-app-region: drag;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.ui-workbench-desktop-titlebar__leading,
+.ui-workbench-desktop-titlebar__center,
+.ui-workbench-desktop-titlebar__trailing {
+  -webkit-app-region: no-drag;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.ui-workbench-desktop-titlebar__center {
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.ui-workbench-desktop-titlebar__trailing {
+  flex: 0 0 auto;
+}
+
+.ui-workbench-desktop-titlebar__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ui-workbench-desktop-titlebar__control {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-workbench-desktop-titlebar__control:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.ui-workbench-desktop-titlebar__control--close:hover {
+  color: #ffffff;
+  background: var(--color-danger);
+}