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

package/src/workbench/management/IntegrationsShell.tsx

@@ -1,53 +1,53 @@
-import type { ReactNode } from 'react';
-import { PanelHeader } from '../../layout/panel';
-import { WorkbenchEditorFrame, WorkbenchPanelScroll } from '../../layout/WorkbenchLayoutBase';
-import { WorkbenchPropertyHint } from '../../layout/WorkbenchPropertyPanel';
-import { SplitView } from '../SplitView';
-
-export interface IntegrationsShellProps {
-  children: ReactNode;
-  detailDataAttributes?: Record<string, string> | undefined;
-  primaryDataAttributes?: Record<string, string> | undefined;
-  rootDataAttributes?: Record<string, string> | undefined;
-  sidebar: ReactNode;
-  sourceDescription: string;
-  sourceTitle: string;
-  sourceTitleTooltip?: string | undefined;
-}
-
-export function IntegrationsShell({
-  children,
-  detailDataAttributes,
-  primaryDataAttributes,
-  rootDataAttributes,
-  sidebar,
-  sourceDescription,
-  sourceTitle,
-  sourceTitleTooltip,
-}: IntegrationsShellProps) {
-  return (
-    <WorkbenchEditorFrame className="workbench-integrations-shell" {...(rootDataAttributes ?? {})}>
-      <SplitView
-        defaultPrimarySizePercent={28}
-        maxPrimarySizePercent={40}
-        minPrimarySizePercent={20}
-        primary={
-          <div className="workbench-primary-sidebar" {...(primaryDataAttributes ?? {})}>
-            {sidebar}
-          </div>
-        }
-        secondary={
-          <section className="workbench-editor-area" {...(detailDataAttributes ?? {})}>
-            <PanelHeader>
-              <span className="block min-w-0 truncate" title={sourceTitleTooltip}>
-                {sourceTitle}
-              </span>
-              <WorkbenchPropertyHint>{sourceDescription}</WorkbenchPropertyHint>
-            </PanelHeader>
-            <WorkbenchPanelScroll>{children}</WorkbenchPanelScroll>
-          </section>
-        }
-      />
-    </WorkbenchEditorFrame>
-  );
-}
+import type { ReactNode } from 'react';
+import { PanelHeader } from '../../layout/panel';
+import { WorkbenchEditorFrame, WorkbenchPanelScroll } from '../../layout/WorkbenchLayoutBase';
+import { WorkbenchPropertyHint } from '../../layout/WorkbenchPropertyPanel';
+import { SplitView } from '../SplitView';
+
+export interface IntegrationsShellProps {
+  children: ReactNode;
+  detailDataAttributes?: Record<string, string> | undefined;
+  primaryDataAttributes?: Record<string, string> | undefined;
+  rootDataAttributes?: Record<string, string> | undefined;
+  sidebar: ReactNode;
+  sourceDescription: string;
+  sourceTitle: string;
+  sourceTitleTooltip?: string | undefined;
+}
+
+export function IntegrationsShell({
+  children,
+  detailDataAttributes,
+  primaryDataAttributes,
+  rootDataAttributes,
+  sidebar,
+  sourceDescription,
+  sourceTitle,
+  sourceTitleTooltip,
+}: IntegrationsShellProps) {
+  return (
+    <WorkbenchEditorFrame className="workbench-integrations-shell" {...(rootDataAttributes ?? {})}>
+      <SplitView
+        defaultPrimarySizePercent={28}
+        maxPrimarySizePercent={40}
+        minPrimarySizePercent={20}
+        primary={
+          <div className="workbench-primary-sidebar" {...(primaryDataAttributes ?? {})}>
+            {sidebar}
+          </div>
+        }
+        secondary={
+          <section className="workbench-editor-area" {...(detailDataAttributes ?? {})}>
+            <PanelHeader>
+              <span className="block min-w-0 truncate" title={sourceTitleTooltip}>
+                {sourceTitle}
+              </span>
+              <WorkbenchPropertyHint>{sourceDescription}</WorkbenchPropertyHint>
+            </PanelHeader>
+            <WorkbenchPanelScroll>{children}</WorkbenchPanelScroll>
+          </section>
+        }
+      />
+    </WorkbenchEditorFrame>
+  );
+}

package/src/workbench/management/KeybindingCaptureField.tsx

@@ -1,142 +1,142 @@
-import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
-import { formatKeybindingLabel } from '@workbench-kit/platform';
-import { Button } from '../../primitives/button';
-import { cx } from '../../utils/cx';
-
-export interface KeybindingCaptureFieldProps {
-  ariaLabel?: string | undefined;
-  className?: string | undefined;
-  disabled?: boolean | undefined;
-  onCancel?: (() => void) | undefined;
-  onChange: (key: string | undefined) => void;
-  placeholder?: string | undefined;
-  value?: string | undefined;
-}
-
-export function KeybindingCaptureField({
-  ariaLabel = 'Keyboard shortcut',
-  className,
-  disabled = false,
-  onCancel,
-  onChange,
-  placeholder = 'Press keys to record',
-  value,
-}: KeybindingCaptureFieldProps) {
-  const fieldId = useId();
-  const [recording, setRecording] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (!recording) {
-      return undefined;
-    }
-
-    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (event.key === 'Escape') {
-        setRecording(false);
-        onCancel?.();
-        return;
-      }
-
-      if (event.key === 'Backspace' || event.key === 'Delete') {
-        onChange(undefined);
-        setRecording(false);
-        return;
-      }
-
-      if (event.key === 'Tab' || event.key === 'Shift') {
-        return;
-      }
-
-      onChange(normalizeKeybindingKeyFromEvent(event));
-      setRecording(false);
-    };
-
-    window.addEventListener('keydown', handleKeyDown, true);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown, true);
-    };
-  }, [onCancel, onChange, recording]);
-
-  const displayValue = value ? formatKeybindingLabel(value) : undefined;
-
-  return (
-    <div className={cx('workbench-keybinding-capture', className)}>
-      <Button
-        ref={buttonRef}
-        aria-label={ariaLabel}
-        className={cx(
-          'workbench-keybinding-capture__trigger',
-          recording && 'workbench-keybinding-capture__trigger--recording',
-        )}
-        disabled={disabled}
-        id={fieldId}
-        type="button"
-        onClick={() => {
-          if (disabled) {
-            return;
-          }
-          setRecording(true);
-          buttonRef.current?.focus();
-        }}
-        onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => {
-          if (disabled) {
-            return;
-          }
-
-          if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            setRecording(true);
-          }
-        }}
-      >
-        {recording ? 'Press shortcut…' : (displayValue ?? placeholder)}
-      </Button>
-      {value ? (
-        <Button
-          aria-label="Clear keyboard shortcut"
-          compact
-          disabled={disabled}
-          type="button"
-          onClick={() => {
-            onChange(undefined);
-            setRecording(false);
-          }}
-        >
-          Clear
-        </Button>
-      ) : null}
-    </div>
-  );
-}
-
-function normalizeKeybindingKeyFromEvent(
-  event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey' | 'shiftKey'>,
-): string {
-  const parts: string[] = [];
-
-  if (event.ctrlKey || event.metaKey) {
-    parts.push('ctrl');
-  }
-  if (event.altKey) {
-    parts.push('alt');
-  }
-  if (event.shiftKey) {
-    parts.push('shift');
-  }
-
-  parts.push(normalizeKeyToken(event.key));
-  return parts.join('+');
-}
-
-function normalizeKeyToken(token: string): string {
-  const key = token.trim().toLowerCase();
-  if (key === 'del') return 'delete';
-  if (key === 'esc') return 'escape';
-  if (key === 'return') return 'enter';
-  if (key === 'spacebar' || key === 'space') return 'space';
-  return key.length === 1 ? key : key;
-}
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
+import { formatKeybindingLabel } from '@workbench-kit/platform';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+
+export interface KeybindingCaptureFieldProps {
+  ariaLabel?: string | undefined;
+  className?: string | undefined;
+  disabled?: boolean | undefined;
+  onCancel?: (() => void) | undefined;
+  onChange: (key: string | undefined) => void;
+  placeholder?: string | undefined;
+  value?: string | undefined;
+}
+
+export function KeybindingCaptureField({
+  ariaLabel = 'Keyboard shortcut',
+  className,
+  disabled = false,
+  onCancel,
+  onChange,
+  placeholder = 'Press keys to record',
+  value,
+}: KeybindingCaptureFieldProps) {
+  const fieldId = useId();
+  const [recording, setRecording] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!recording) {
+      return undefined;
+    }
+
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (event.key === 'Escape') {
+        setRecording(false);
+        onCancel?.();
+        return;
+      }
+
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        onChange(undefined);
+        setRecording(false);
+        return;
+      }
+
+      if (event.key === 'Tab' || event.key === 'Shift') {
+        return;
+      }
+
+      onChange(normalizeKeybindingKeyFromEvent(event));
+      setRecording(false);
+    };
+
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [onCancel, onChange, recording]);
+
+  const displayValue = value ? formatKeybindingLabel(value) : undefined;
+
+  return (
+    <div className={cx('workbench-keybinding-capture', className)}>
+      <Button
+        ref={buttonRef}
+        aria-label={ariaLabel}
+        className={cx(
+          'workbench-keybinding-capture__trigger',
+          recording && 'workbench-keybinding-capture__trigger--recording',
+        )}
+        disabled={disabled}
+        id={fieldId}
+        type="button"
+        onClick={() => {
+          if (disabled) {
+            return;
+          }
+          setRecording(true);
+          buttonRef.current?.focus();
+        }}
+        onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => {
+          if (disabled) {
+            return;
+          }
+
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            setRecording(true);
+          }
+        }}
+      >
+        {recording ? 'Press shortcut…' : (displayValue ?? placeholder)}
+      </Button>
+      {value ? (
+        <Button
+          aria-label="Clear keyboard shortcut"
+          compact
+          disabled={disabled}
+          type="button"
+          onClick={() => {
+            onChange(undefined);
+            setRecording(false);
+          }}
+        >
+          Clear
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+function normalizeKeybindingKeyFromEvent(
+  event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey' | 'shiftKey'>,
+): string {
+  const parts: string[] = [];
+
+  if (event.ctrlKey || event.metaKey) {
+    parts.push('ctrl');
+  }
+  if (event.altKey) {
+    parts.push('alt');
+  }
+  if (event.shiftKey) {
+    parts.push('shift');
+  }
+
+  parts.push(normalizeKeyToken(event.key));
+  return parts.join('+');
+}
+
+function normalizeKeyToken(token: string): string {
+  const key = token.trim().toLowerCase();
+  if (key === 'del') return 'delete';
+  if (key === 'esc') return 'escape';
+  if (key === 'return') return 'enter';
+  if (key === 'spacebar' || key === 'space') return 'space';
+  return key.length === 1 ? key : key;
+}

package/src/workbench/management/KeybindingManagementPanel.tsx

@@ -1,120 +1,120 @@
-import { useMemo } from 'react';
-import type { KeybindingManagementEntry } from '@workbench-kit/platform';
-import { filterKeybindingManagementEntries } from '@workbench-kit/platform';
-import { Badge } from '../../primitives/badge';
-import { Button } from '../../primitives/button';
-import { KeybindingCaptureField } from './KeybindingCaptureField.js';
-import {
-  ManagementPanelEmptyState,
-  ManagementPanelFrame,
-  ManagementPanelToolbar,
-  useManagementPanelQuery,
-} from './ManagementPanelFrame.js';
-
-export interface KeybindingManagementPanelProps {
-  className?: string | undefined;
-  emptyLabel?: string | undefined;
-  entries: readonly KeybindingManagementEntry[];
-  onResetKeybinding?: ((commandId: string) => void) | undefined;
-  onSetKeybinding?: ((commandId: string, key: string | undefined) => void) | undefined;
-  query?: string | undefined;
-  summaryLabel?: string | undefined;
-}
-
-export function KeybindingManagementPanel({
-  className,
-  emptyLabel = 'No commands match the current filter.',
-  entries,
-  onResetKeybinding,
-  onSetKeybinding,
-  query: controlledQuery,
-  summaryLabel,
-}: KeybindingManagementPanelProps) {
-  const { query, updateQuery } = useManagementPanelQuery(controlledQuery);
-  const filteredEntries = useMemo(
-    () => filterKeybindingManagementEntries(entries, query),
-    [entries, query],
-  );
-
-  return (
-    <ManagementPanelFrame
-      className={className}
-      description="Assign keyboard shortcuts to registered commands. User overrides replace the default binding for that command and persist in this host."
-      id="workbench-keybinding-management"
-      title="Keyboard Shortcuts"
-    >
-      <ManagementPanelToolbar
-        filterLabel="Filter keyboard shortcuts"
-        filterPlaceholder="Filter by command, id, category, or shortcut"
-        query={query}
-        summary={
-          summaryLabel ??
-          `${filteredEntries.length} of ${entries.length} command${entries.length === 1 ? '' : 's'} visible`
-        }
-        onQueryChange={updateQuery}
-      />
-
-      {filteredEntries.length === 0 ? (
-        <ManagementPanelEmptyState>{emptyLabel}</ManagementPanelEmptyState>
-      ) : (
-        <ul className="workbench-management-list">
-          {filteredEntries.map((entry) => (
-            <KeybindingManagementRow
-              key={entry.commandId}
-              entry={entry}
-              onResetKeybinding={onResetKeybinding}
-              onSetKeybinding={onSetKeybinding}
-            />
-          ))}
-        </ul>
-      )}
-    </ManagementPanelFrame>
-  );
-}
-
-function KeybindingManagementRow({
-  entry,
-  onResetKeybinding,
-  onSetKeybinding,
-}: {
-  entry: KeybindingManagementEntry;
-  onResetKeybinding?: ((commandId: string) => void) | undefined;
-  onSetKeybinding?: ((commandId: string, key: string | undefined) => void) | undefined;
-}) {
-  const hasOverride = Boolean(entry.userKey);
-  const canReset = hasOverride && onResetKeybinding;
-
-  return (
-    <li className="workbench-management-list-item workbench-management-list-item--responsive">
-      <div className="workbench-management-list-item__main">
-        <span className="workbench-management-list-item__label">{entry.commandLabel}</span>
-        <code className="workbench-management-list-item__id">{entry.commandId}</code>
-        <div className="workbench-management-list-item__meta">
-          {entry.category ? <Badge variant="muted">{entry.category}</Badge> : null}
-          {entry.sourceLabel ? <Badge variant="muted">{entry.sourceLabel}</Badge> : null}
-          {entry.defaultKeyLabel && hasOverride ? (
-            <Badge variant="muted">Default: {entry.defaultKeyLabel}</Badge>
-          ) : null}
-          {entry.conflictCommandId ? (
-            <Badge variant="danger">Conflicts with {entry.conflictCommandId}</Badge>
-          ) : null}
-        </div>
-      </div>
-
-      <div className="workbench-management-list-item__actions">
-        <KeybindingCaptureField
-          ariaLabel={`Keyboard shortcut for ${entry.commandLabel}`}
-          value={entry.userKey ?? entry.defaultKey}
-          onChange={(key) => {
-            onSetKeybinding?.(entry.commandId, key);
-          }}
-        />
-        {canReset ? (
-          <Button compact type="button" onClick={() => onResetKeybinding(entry.commandId)}>
-            Reset
-          </Button>
-        ) : null}
-      </div>
-    </li>
-  );
-}
+import { useMemo } from 'react';
+import type { KeybindingManagementEntry } from '@workbench-kit/platform';
+import { filterKeybindingManagementEntries } from '@workbench-kit/platform';
+import { Badge } from '../../primitives/badge';
+import { Button } from '../../primitives/button';
+import { KeybindingCaptureField } from './KeybindingCaptureField.js';
+import {
+  ManagementPanelEmptyState,
+  ManagementPanelFrame,
+  ManagementPanelToolbar,
+  useManagementPanelQuery,
+} from './ManagementPanelFrame.js';
+
+export interface KeybindingManagementPanelProps {
+  className?: string | undefined;
+  emptyLabel?: string | undefined;
+  entries: readonly KeybindingManagementEntry[];
+  onResetKeybinding?: ((commandId: string) => void) | undefined;
+  onSetKeybinding?: ((commandId: string, key: string | undefined) => void) | undefined;
+  query?: string | undefined;
+  summaryLabel?: string | undefined;
+}
+
+export function KeybindingManagementPanel({
+  className,
+  emptyLabel = 'No commands match the current filter.',
+  entries,
+  onResetKeybinding,
+  onSetKeybinding,
+  query: controlledQuery,
+  summaryLabel,
+}: KeybindingManagementPanelProps) {
+  const { query, updateQuery } = useManagementPanelQuery(controlledQuery);
+  const filteredEntries = useMemo(
+    () => filterKeybindingManagementEntries(entries, query),
+    [entries, query],
+  );
+
+  return (
+    <ManagementPanelFrame
+      className={className}
+      description="Assign keyboard shortcuts to registered commands. User overrides replace the default binding for that command and persist in this host."
+      id="workbench-keybinding-management"
+      title="Keyboard Shortcuts"
+    >
+      <ManagementPanelToolbar
+        filterLabel="Filter keyboard shortcuts"
+        filterPlaceholder="Filter by command, id, category, or shortcut"
+        query={query}
+        summary={
+          summaryLabel ??
+          `${filteredEntries.length} of ${entries.length} command${entries.length === 1 ? '' : 's'} visible`
+        }
+        onQueryChange={updateQuery}
+      />
+
+      {filteredEntries.length === 0 ? (
+        <ManagementPanelEmptyState>{emptyLabel}</ManagementPanelEmptyState>
+      ) : (
+        <ul className="workbench-management-list">
+          {filteredEntries.map((entry) => (
+            <KeybindingManagementRow
+              key={entry.commandId}
+              entry={entry}
+              onResetKeybinding={onResetKeybinding}
+              onSetKeybinding={onSetKeybinding}
+            />
+          ))}
+        </ul>
+      )}
+    </ManagementPanelFrame>
+  );
+}
+
+function KeybindingManagementRow({
+  entry,
+  onResetKeybinding,
+  onSetKeybinding,
+}: {
+  entry: KeybindingManagementEntry;
+  onResetKeybinding?: ((commandId: string) => void) | undefined;
+  onSetKeybinding?: ((commandId: string, key: string | undefined) => void) | undefined;
+}) {
+  const hasOverride = Boolean(entry.userKey);
+  const canReset = hasOverride && onResetKeybinding;
+
+  return (
+    <li className="workbench-management-list-item workbench-management-list-item--responsive">
+      <div className="workbench-management-list-item__main">
+        <span className="workbench-management-list-item__label">{entry.commandLabel}</span>
+        <code className="workbench-management-list-item__id">{entry.commandId}</code>
+        <div className="workbench-management-list-item__meta">
+          {entry.category ? <Badge variant="muted">{entry.category}</Badge> : null}
+          {entry.sourceLabel ? <Badge variant="muted">{entry.sourceLabel}</Badge> : null}
+          {entry.defaultKeyLabel && hasOverride ? (
+            <Badge variant="muted">Default: {entry.defaultKeyLabel}</Badge>
+          ) : null}
+          {entry.conflictCommandId ? (
+            <Badge variant="danger">Conflicts with {entry.conflictCommandId}</Badge>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="workbench-management-list-item__actions">
+        <KeybindingCaptureField
+          ariaLabel={`Keyboard shortcut for ${entry.commandLabel}`}
+          value={entry.userKey ?? entry.defaultKey}
+          onChange={(key) => {
+            onSetKeybinding?.(entry.commandId, key);
+          }}
+        />
+        {canReset ? (
+          <Button compact type="button" onClick={() => onResetKeybinding(entry.commandId)}>
+            Reset
+          </Button>
+        ) : null}
+      </div>
+    </li>
+  );
+}