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

package/src/layout/property/property-section.css

@@ -0,0 +1,97 @@
+.ui-workbench-property-section {
+  min-width: 0;
+  margin: 0 0 20px;
+}
+
+.ui-workbench-property-section[data-level='group'] {
+  margin: 0 0 12px;
+}
+
+.ui-workbench-property-section__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin-bottom: 8px;
+}
+
+.ui-workbench-property-section[data-level='category'] > .ui-workbench-property-section__header {
+  padding-bottom: 4px;
+  border-bottom: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+}
+
+.ui-workbench-property-section__header .ui-workbench-section-title {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  color: var(--vscode-sideBarSectionHeader-foreground, var(--color-text));
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.ui-workbench-property-section[data-level='group']
+  > .ui-workbench-property-section__header
+  .ui-workbench-section-title {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.ui-workbench-property-section__toggle {
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-workbench-property-section__toggle:hover {
+  color: var(--color-text);
+}
+
+.ui-workbench-property-section__toggle:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-accent));
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.ui-workbench-property-section__chevron {
+  width: 14px;
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground, var(--color-text-subtle));
+  font-size: 12px;
+}
+
+.ui-workbench-property-section__actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.ui-workbench-property-section__body,
+.ui-workbench-property-stack {
+  display: grid;
+  min-width: 0;
+}
+
+.ui-workbench-property-section__body[hidden] {
+  display: none;
+}
+
+.ui-workbench-property-section__body,
+.ui-workbench-property-stack[data-gap='md'] {
+  gap: 10px;
+}

package/src/layout/property/property-stack.css

@@ -0,0 +1,11 @@
+.ui-workbench-property-stack[data-gap='xs'] {
+  gap: 4px;
+}
+
+.ui-workbench-property-stack[data-gap='sm'] {
+  gap: 8px;
+}
+
+.ui-workbench-property-stack[data-gap='lg'] {
+  gap: 12px;
+}

package/src/layout/property/property-toggle.css

@@ -0,0 +1,14 @@
+.ui-workbench-property-toggle.ui-button {
+  height: 24px;
+  min-height: 0;
+  padding: 0 8px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  background: var(--vscode-input-background, var(--color-surface));
+  border-color: var(--vscode-input-border, var(--color-border));
+  font-size: 10px;
+}
+
+.ui-workbench-property-toggle.ui-button[data-active='true'] {
+  color: var(--vscode-button-foreground, var(--color-bg));
+  background: var(--vscode-button-background, var(--color-accent));
+}

package/src/layout/propertyFieldFilter.ts

@@ -0,0 +1,84 @@
+/**
+ * Declared-first property inspector search.
+ *
+ * Hosts supply a field manifest (id + resolved label + optional section/keywords).
+ * Kit filters by query tokens — no DOM scrape.
+ */
+
+export interface WorkbenchPropertyFieldManifestEntry {
+  /** Stable field id from the product/registry declaration. */
+  readonly id: string;
+  /** Host-resolved display label (already localized when applicable). */
+  readonly label: string;
+  /** Optional section/category anchor used to hide empty groups after filter. */
+  readonly sectionId?: string;
+  /** Extra searchable tokens (aliases, category titles, editor kinds). */
+  readonly keywords?: readonly string[];
+}
+
+export interface WorkbenchPropertyFieldFilterInput {
+  readonly fields: readonly WorkbenchPropertyFieldManifestEntry[];
+  /** Free-text query; empty/whitespace returns all fields. */
+  readonly query?: string;
+}
+
+export interface WorkbenchPropertyFieldFilterResult {
+  /** Matching field entries in original order. */
+  readonly fields: readonly WorkbenchPropertyFieldManifestEntry[];
+  /** Matching field ids (same order as `fields`). */
+  readonly fieldIds: readonly string[];
+  /** Distinct section ids that still have at least one match. */
+  readonly sectionIds: readonly string[];
+}
+
+function normalizedSearchText(value: string): string {
+  return value.trim().toLocaleLowerCase();
+}
+
+function fieldSearchText(field: WorkbenchPropertyFieldManifestEntry): string {
+  return normalizedSearchText(
+    [field.id, field.label, field.sectionId, ...(field.keywords ?? [])]
+      .filter((part): part is string => typeof part === 'string' && part.length > 0)
+      .join(' '),
+  );
+}
+
+/**
+ * Filters a declared property-field manifest by whitespace-separated query tokens.
+ * Every token must match the combined id/label/section/keywords haystack.
+ */
+export function filterWorkbenchPropertyFields({
+  fields,
+  query = '',
+}: WorkbenchPropertyFieldFilterInput): WorkbenchPropertyFieldFilterResult {
+  const tokens = normalizedSearchText(query).split(/\s+/).filter(Boolean);
+  const matched =
+    tokens.length === 0
+      ? [...fields]
+      : fields.filter((field) => {
+          const haystack = fieldSearchText(field);
+          return tokens.every((token) => haystack.includes(token));
+        });
+
+  const sectionIds: string[] = [];
+  const seenSections = new Set<string>();
+  for (const field of matched) {
+    const sectionId = field.sectionId;
+    if (sectionId === undefined || sectionId.length === 0 || seenSections.has(sectionId)) {
+      continue;
+    }
+    seenSections.add(sectionId);
+    sectionIds.push(sectionId);
+  }
+
+  return {
+    fields: matched,
+    fieldIds: matched.map((field) => field.id),
+    sectionIds,
+  };
+}
+
+/** True when the query would hide at least one field from the manifest. */
+export function isWorkbenchPropertySearchActive(query: string | undefined): boolean {
+  return normalizedSearchText(query ?? '').length > 0;
+}

package/src/layout/sidebar/SideBarTree.tsx

@@ -0,0 +1,301 @@
+import {
+  useCallback,
+  useMemo,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+import { SideBarList, SideBarListItem } from './SideBarViewFrame';
+
+/**
+ * Controlled sidebar tree for library / provider category rows.
+ *
+ * Branch vs leaf: items with `children` (even empty) render as expandable branches;
+ * items without `children` are leaves. Hosts own expand/selection sets.
+ *
+ * Keyboard (default on): ArrowUp/Down move focus+selection (single mode) or focus
+ * (multi mode); ArrowRight expands / moves into first child; ArrowLeft collapses /
+ * moves to parent; Enter/Space activates selection. Virtualization and DnD are
+ * out of scope for v1.
+ */
+export interface SideBarTreeItem {
+  readonly id: string;
+  readonly label: ReactNode;
+  readonly children?: readonly SideBarTreeItem[];
+  readonly disabled?: boolean;
+  readonly icon?: ReactNode;
+}
+
+export type SideBarTreeSelectionMode = 'single' | 'multi';
+
+export interface SideBarTreeProps {
+  readonly items: readonly SideBarTreeItem[];
+  readonly expandedIds: ReadonlySet<string>;
+  readonly selectedIds: ReadonlySet<string>;
+  readonly onExpandedIdsChange: (next: Set<string>) => void;
+  readonly onSelectedIdsChange: (next: Set<string>) => void;
+  readonly selectionMode?: SideBarTreeSelectionMode;
+  /** When false, arrow / activation keys are not handled. Default true. */
+  readonly keyboardNavigation?: boolean;
+  readonly 'aria-label'?: string;
+  readonly className?: string;
+}
+
+export interface SideBarTreeVisibleNode {
+  readonly depth: number;
+  readonly item: SideBarTreeItem;
+  readonly parentId: string | null;
+  readonly hasChildren: boolean;
+}
+
+export function isSideBarTreeBranch(item: SideBarTreeItem): boolean {
+  return item.children !== undefined;
+}
+
+export function flattenVisibleSideBarTreeItems(
+  items: readonly SideBarTreeItem[],
+  expandedIds: ReadonlySet<string>,
+  depth = 0,
+  parentId: string | null = null,
+): SideBarTreeVisibleNode[] {
+  const rows: SideBarTreeVisibleNode[] = [];
+
+  for (const item of items) {
+    const hasChildren = isSideBarTreeBranch(item);
+    rows.push({ depth, item, parentId, hasChildren });
+
+    if (hasChildren && expandedIds.has(item.id) && item.children) {
+      rows.push(...flattenVisibleSideBarTreeItems(item.children, expandedIds, depth + 1, item.id));
+    }
+  }
+
+  return rows;
+}
+
+export function toggleSideBarTreeId(ids: ReadonlySet<string>, id: string): Set<string> {
+  const next = new Set(ids);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  return next;
+}
+
+export function selectSideBarTreeIds(
+  current: ReadonlySet<string>,
+  id: string,
+  mode: SideBarTreeSelectionMode,
+  additive: boolean,
+): Set<string> {
+  if (mode === 'single' || !additive) {
+    return new Set([id]);
+  }
+  return toggleSideBarTreeId(current, id);
+}
+
+export function SideBarTree({
+  items,
+  expandedIds,
+  selectedIds,
+  onExpandedIdsChange,
+  onSelectedIdsChange,
+  selectionMode = 'single',
+  keyboardNavigation = true,
+  'aria-label': ariaLabel = 'Sidebar tree',
+  className,
+}: SideBarTreeProps) {
+  const visibleNodes = useMemo(
+    () => flattenVisibleSideBarTreeItems(items, expandedIds),
+    [expandedIds, items],
+  );
+
+  const [focusedId, setFocusedId] = useState<string | null>(null);
+
+  const focusIndex = useMemo(() => {
+    if (focusedId == null) {
+      return visibleNodes.length > 0 ? 0 : -1;
+    }
+    const index = visibleNodes.findIndex((node) => node.item.id === focusedId);
+    return index >= 0 ? index : visibleNodes.length > 0 ? 0 : -1;
+  }, [focusedId, visibleNodes]);
+
+  const toggleExpanded = useCallback(
+    (id: string) => {
+      onExpandedIdsChange(toggleSideBarTreeId(expandedIds, id));
+    },
+    [expandedIds, onExpandedIdsChange],
+  );
+
+  const selectItem = useCallback(
+    (id: string, additive: boolean) => {
+      onSelectedIdsChange(selectSideBarTreeIds(selectedIds, id, selectionMode, additive));
+      setFocusedId(id);
+    },
+    [onSelectedIdsChange, selectedIds, selectionMode],
+  );
+
+  const handleItemClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>, node: SideBarTreeVisibleNode) => {
+      if (node.item.disabled) {
+        return;
+      }
+
+      const additive = selectionMode === 'multi' && (event.metaKey || event.ctrlKey);
+      selectItem(node.item.id, additive);
+
+      if (node.hasChildren && !additive) {
+        toggleExpanded(node.item.id);
+      }
+    },
+    [selectItem, selectionMode, toggleExpanded],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLUListElement>) => {
+      if (!keyboardNavigation || visibleNodes.length === 0 || focusIndex < 0) {
+        return;
+      }
+
+      const current = visibleNodes[focusIndex];
+      if (!current) {
+        return;
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        const next = visibleNodes[Math.min(visibleNodes.length - 1, focusIndex + 1)];
+        if (!next || next.item.disabled) {
+          return;
+        }
+        setFocusedId(next.item.id);
+        if (selectionMode === 'single') {
+          onSelectedIdsChange(new Set([next.item.id]));
+        }
+        return;
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        const next = visibleNodes[Math.max(0, focusIndex - 1)];
+        if (!next || next.item.disabled) {
+          return;
+        }
+        setFocusedId(next.item.id);
+        if (selectionMode === 'single') {
+          onSelectedIdsChange(new Set([next.item.id]));
+        }
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        if (!current.hasChildren || current.item.disabled) {
+          return;
+        }
+        if (!expandedIds.has(current.item.id)) {
+          toggleExpanded(current.item.id);
+          return;
+        }
+        const firstChild = current.item.children?.[0];
+        if (firstChild && !firstChild.disabled) {
+          setFocusedId(firstChild.id);
+          if (selectionMode === 'single') {
+            onSelectedIdsChange(new Set([firstChild.id]));
+          }
+        }
+        return;
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        if (current.hasChildren && expandedIds.has(current.item.id)) {
+          toggleExpanded(current.item.id);
+          return;
+        }
+        if (current.parentId) {
+          setFocusedId(current.parentId);
+          if (selectionMode === 'single') {
+            onSelectedIdsChange(new Set([current.parentId]));
+          }
+        }
+        return;
+      }
+
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        if (current.item.disabled) {
+          return;
+        }
+        selectItem(current.item.id, selectionMode === 'multi' && (event.metaKey || event.ctrlKey));
+        if (current.hasChildren && selectionMode === 'single') {
+          toggleExpanded(current.item.id);
+        }
+      }
+    },
+    [
+      expandedIds,
+      focusIndex,
+      keyboardNavigation,
+      onSelectedIdsChange,
+      selectItem,
+      selectionMode,
+      toggleExpanded,
+      visibleNodes,
+    ],
+  );
+
+  return (
+    <SideBarList
+      aria-label={ariaLabel}
+      className={cx('ui-sidebar-tree', className)}
+      fill
+      role="tree"
+      onKeyDown={handleKeyDown}
+    >
+      {visibleNodes.map((node, index) => {
+        const { item, depth, hasChildren } = node;
+        const expanded = hasChildren && expandedIds.has(item.id);
+        const selected = selectedIds.has(item.id);
+        const focused = focusIndex === index;
+
+        return (
+          <SideBarListItem
+            key={item.id}
+            depth={depth}
+            disabled={item.disabled}
+            selected={selected}
+            tabIndex={focused ? 0 : -1}
+            wrapperProps={{
+              role: 'treeitem',
+              'aria-level': depth + 1,
+              'aria-selected': selected,
+              ...(hasChildren ? { 'aria-expanded': expanded } : {}),
+            }}
+            onClick={(event) => handleItemClick(event, node)}
+            onFocus={() => setFocusedId(item.id)}
+          >
+            <span className="workbench-tree-prefix">
+              {hasChildren ? (
+                <i
+                  aria-hidden="true"
+                  className={cxCodicon(
+                    expanded ? 'chevron-down' : 'chevron-right',
+                    'workbench-tree-chevron',
+                  )}
+                />
+              ) : (
+                <span className="workbench-tree-spacer" />
+              )}
+              {item.icon}
+            </span>
+            <span className="workbench-tree-label">{item.label}</span>
+          </SideBarListItem>
+        );
+      })}
+    </SideBarList>
+  );
+}