@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/management/LibraryCatalogPickerDialog.tsx

@@ -0,0 +1,208 @@
+import './library-catalog-picker-dialog.css';
+import { useMemo, useState, type ReactNode } from 'react';
+
+import { FilterBar, FilterBarRow } from '../../layout/panel';
+import { CatalogBrowseCard } from '../../primitives/catalog-browse-card/CatalogBrowseCard';
+import { ClearableTextInput } from '../../primitives/clearable-text-input/ClearableTextInput';
+import { EmptyState } from '../../primitives/empty-state/EmptyState';
+import { ScrollArea } from '../../primitives/scroll-area/ScrollArea';
+import {
+  WorkbenchDialogFrame,
+  type WorkbenchDialogBodyLayout,
+  type WorkbenchDialogFrameSize,
+} from './WorkbenchDialogFrame';
+
+/**
+ * Product-neutral catalog row for the default cover-grid renderer.
+ * Hosts with custom media should pass `renderItemMedia`.
+ */
+export interface LibraryCatalogPickerItem {
+  readonly id: string;
+  readonly imageAlt?: string | undefined;
+  readonly imageUrl?: string | null | undefined;
+  readonly label: string;
+  readonly meta?: string | null | undefined;
+}
+
+export interface LibraryCatalogPickerDialogLabels {
+  readonly clearSearch: string;
+  readonly empty: string;
+  readonly loading: string;
+  readonly noMatches: string;
+  readonly searchAria: string;
+  readonly searchPlaceholder: string;
+}
+
+export interface LibraryCatalogPickerDialogProps {
+  readonly ariaLabel: string;
+  readonly bodyLayout?: WorkbenchDialogBodyLayout;
+  readonly closeLabel: string;
+  readonly dataAttributes?: Record<string, string>;
+  readonly frameSize?: WorkbenchDialogFrameSize;
+  /** Host actions above the searchable grid (install, import, refresh, …). */
+  readonly headerActions?: ReactNode;
+  readonly isLoading?: boolean;
+  readonly items: ReadonlyArray<LibraryCatalogPickerItem>;
+  readonly labels: LibraryCatalogPickerDialogLabels;
+  readonly maximizeLabel?: string;
+  readonly onClose: () => void;
+  /** Called when the user activates a card (primary pointer or double-click). */
+  readonly onPick: (itemId: string) => void;
+  /**
+   * Optional media override for cover tiles. When omitted, cards use
+   * `imageUrl` / label initial fallback via `CatalogBrowseCard`.
+   */
+  readonly renderItemMedia?: ((item: LibraryCatalogPickerItem) => ReactNode) | undefined;
+  readonly restoreLabel?: string;
+  readonly selectedItemId?: string | null;
+  readonly surfaceDataAttributes?: Record<string, string>;
+  readonly title: ReactNode;
+}
+
+function filterCatalogPickerItems(
+  items: ReadonlyArray<LibraryCatalogPickerItem>,
+  query: string,
+): ReadonlyArray<LibraryCatalogPickerItem> {
+  const normalized = query.trim().toLowerCase();
+  if (normalized.length === 0) {
+    return items;
+  }
+
+  return items.filter((item) => {
+    if (item.label.toLowerCase().includes(normalized)) {
+      return true;
+    }
+    return (item.meta?.toLowerCase() ?? '').includes(normalized);
+  });
+}
+
+/**
+ * Management dialog shell for picking one catalog/asset item.
+ * Host owns item loading, persistence, and domain actions in `headerActions`.
+ */
+export function LibraryCatalogPickerDialog({
+  ariaLabel,
+  bodyLayout = 'column-fill',
+  closeLabel,
+  dataAttributes,
+  frameSize = 'asset-library',
+  headerActions = null,
+  isLoading = false,
+  items,
+  labels,
+  maximizeLabel,
+  onClose,
+  onPick,
+  renderItemMedia,
+  restoreLabel,
+  selectedItemId = null,
+  surfaceDataAttributes,
+  title,
+}: LibraryCatalogPickerDialogProps): ReactNode {
+  const [searchQuery, setSearchQuery] = useState('');
+  const filteredItems = useMemo(
+    () => filterCatalogPickerItems(items, searchQuery),
+    [items, searchQuery],
+  );
+  const hasQuery = searchQuery.trim().length > 0;
+
+  const pickItem = (itemId: string): void => {
+    onPick(itemId);
+  };
+
+  return (
+    <WorkbenchDialogFrame
+      ariaLabel={ariaLabel}
+      bodyLayout={bodyLayout}
+      closeLabel={closeLabel}
+      dataAttributes={dataAttributes}
+      frameSize={frameSize}
+      maximizeLabel={maximizeLabel}
+      onClose={onClose}
+      restoreLabel={restoreLabel}
+      surfaceDataAttributes={surfaceDataAttributes}
+      title={title}
+    >
+      <div
+        className="ui-library-catalog-picker-dialog"
+        data-ui-library-catalog-picker-dialog="true"
+      >
+        {headerActions !== null && headerActions !== undefined ? (
+          <div
+            className="ui-library-catalog-picker-dialog__actions"
+            data-ui-library-catalog-picker-actions="true"
+          >
+            {headerActions}
+          </div>
+        ) : null}
+        {isLoading && items.length === 0 ? (
+          <EmptyState compact icon="sync">
+            {labels.loading}
+          </EmptyState>
+        ) : items.length === 0 ? (
+          <EmptyState compact icon="files">
+            {labels.empty}
+          </EmptyState>
+        ) : (
+          <div className="ui-library-catalog-picker-dialog__body">
+            <FilterBar>
+              <FilterBarRow data-columns="search-action">
+                <ClearableTextInput
+                  aria-label={labels.searchAria}
+                  clearLabel={labels.clearSearch}
+                  controlWidth="full"
+                  data-ui-library-catalog-picker-search="true"
+                  placeholder={labels.searchPlaceholder}
+                  value={searchQuery}
+                  onValueChange={setSearchQuery}
+                />
+              </FilterBarRow>
+            </FilterBar>
+            {filteredItems.length === 0 ? (
+              <EmptyState compact data-ui-library-catalog-picker-no-matches="true" icon="search">
+                {hasQuery ? labels.noMatches : labels.empty}
+              </EmptyState>
+            ) : (
+              <ScrollArea className="ui-library-catalog-picker-dialog__scroll">
+                <div
+                  className="ui-library-catalog-picker-dialog__grid"
+                  data-ui-library-catalog-picker-grid="true"
+                  role="listbox"
+                >
+                  {filteredItems.map((item) => {
+                    const customMedia = renderItemMedia?.(item);
+                    return (
+                      <CatalogBrowseCard
+                        key={item.id}
+                        className="ui-library-catalog-picker-dialog__card"
+                        data-ui-library-catalog-picker-item={item.id}
+                        imageAlt={item.imageAlt}
+                        imageUrl={customMedia === undefined ? (item.imageUrl ?? null) : null}
+                        label={item.label}
+                        media={customMedia}
+                        meta={item.meta}
+                        selected={selectedItemId === item.id}
+                        tooltip={item.label}
+                        type="button"
+                        variant="cover"
+                        onDoubleClick={() => {
+                          pickItem(item.id);
+                        }}
+                        onPointerDown={(event) => {
+                          if (event.button !== 0) {
+                            return;
+                          }
+                          pickItem(item.id);
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+            )}
+          </div>
+        )}
+      </div>
+    </WorkbenchDialogFrame>
+  );
+}

package/src/workbench/management/LibraryFacetFilterDialog.tsx

@@ -0,0 +1,62 @@
+import './library-facet-filter-dialog.css';
+import type { ReactNode } from 'react';
+
+import {
+  LibraryFacetFilterPanel,
+  type LibraryFacetFilterPanelProps,
+} from '../../primitives/library-facet-filter-panel/LibraryFacetFilterPanel';
+import {
+  WorkbenchDialogFrame,
+  type WorkbenchDialogBodyLayout,
+  type WorkbenchDialogFrameSize,
+} from './WorkbenchDialogFrame';
+
+export interface LibraryFacetFilterDialogProps extends LibraryFacetFilterPanelProps {
+  readonly ariaLabel: string;
+  readonly bodyLayout?: WorkbenchDialogBodyLayout;
+  readonly closeLabel: string;
+  readonly dataAttributes?: Record<string, string>;
+  readonly frameSize?: WorkbenchDialogFrameSize;
+  readonly maximizeLabel?: string;
+  readonly onClose: () => void;
+  readonly restoreLabel?: string;
+  readonly surfaceDataAttributes?: Record<string, string>;
+  readonly title: ReactNode;
+}
+
+/**
+ * Modal wrapper around `LibraryFacetFilterPanel` using `WorkbenchDialogFrame`.
+ * Host owns filter state, schema mapping, and open/close.
+ */
+export function LibraryFacetFilterDialog({
+  ariaLabel,
+  bodyLayout = 'column-fill',
+  closeLabel,
+  dataAttributes,
+  frameSize = 'metadata-editor',
+  maximizeLabel,
+  onClose,
+  restoreLabel,
+  surfaceDataAttributes,
+  title,
+  ...panelProps
+}: LibraryFacetFilterDialogProps): ReactNode {
+  return (
+    <WorkbenchDialogFrame
+      ariaLabel={ariaLabel}
+      bodyLayout={bodyLayout}
+      closeLabel={closeLabel}
+      dataAttributes={dataAttributes}
+      frameSize={frameSize}
+      maximizeLabel={maximizeLabel}
+      onClose={onClose}
+      restoreLabel={restoreLabel}
+      surfaceDataAttributes={surfaceDataAttributes}
+      title={title}
+    >
+      <div className="ui-library-facet-filter-dialog" data-ui-library-facet-filter-dialog="true">
+        <LibraryFacetFilterPanel {...panelProps} />
+      </div>
+    </WorkbenchDialogFrame>
+  );
+}

package/src/workbench/management/ManagementCard.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+
+export type ManagementCardIconTone = 'editor' | 'feature' | 'language' | 'neutral' | 'theme';
+
+export type ManagementCardLayout = 'media' | 'row' | 'stack';
+
+export interface ManagementCardProps {
+  actions?: ReactNode;
+  active?: boolean;
+  badges?: ReactNode;
+  children?: ReactNode;
+  className?: string | undefined;
+  description?: ReactNode;
+  icon?: string | undefined;
+  iconTone?: ManagementCardIconTone;
+  id?: ReactNode;
+  layout?: ManagementCardLayout;
+  subtitle?: ReactNode;
+  title: ReactNode;
+}
+
+export function ManagementCard({
+  actions,
+  active = false,
+  badges,
+  children,
+  className,
+  description,
+  icon,
+  iconTone = 'neutral',
+  id,
+  layout = icon ? 'media' : 'stack',
+  subtitle,
+  title,
+}: ManagementCardProps) {
+  const resolvedLayout = icon ? 'media' : layout;
+
+  return (
+    <article
+      className={cx(
+        'workbench-management-card',
+        resolvedLayout === 'media' && 'workbench-management-card--media',
+        resolvedLayout === 'row' && 'workbench-management-card--row',
+        resolvedLayout === 'stack' && 'workbench-management-card--stack',
+        active && 'workbench-management-card--active',
+        className,
+      )}
+    >
+      {resolvedLayout === 'media' && icon ? (
+        <div
+          aria-hidden
+          className={cx(
+            'workbench-management-card__icon-wrap',
+            `workbench-management-card__icon-wrap--${iconTone}`,
+          )}
+        >
+          <i className={cx(cxCodicon(icon), 'workbench-management-card__icon')} />
+        </div>
+      ) : null}
+      <div className="workbench-management-card__body">
+        <div className="workbench-management-card__header">
+          <div className="workbench-management-card__titles">
+            <span className="workbench-management-card__title">{title}</span>
+            {subtitle ? <p className="workbench-management-card__subtitle">{subtitle}</p> : null}
+          </div>
+          {badges ? <div className="workbench-management-card__badges">{badges}</div> : null}
+        </div>
+        {id ? <code className="workbench-management-card__id">{id}</code> : null}
+        {description ? (
+          <p className="workbench-management-card__description">{description}</p>
+        ) : null}
+        {children}
+      </div>
+      {actions ? <div className="workbench-management-card__actions">{actions}</div> : null}
+    </article>
+  );
+}
+
+export function ManagementCardList({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string | undefined;
+}) {
+  return <ul className={cx('workbench-management-card-list', className)}>{children}</ul>;
+}

package/src/workbench/management/ManagementFilterChips.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+
+export interface ManagementFilterChipOption<TValue extends string> {
+  label: ReactNode;
+  value: TValue;
+}
+
+export interface ManagementFilterChipsProps<TValue extends string> {
+  ariaLabel: string;
+  onChange: (value: TValue) => void;
+  options: readonly ManagementFilterChipOption<TValue>[];
+  value: TValue;
+}
+
+export function ManagementFilterChips<TValue extends string>({
+  ariaLabel,
+  onChange,
+  options,
+  value,
+}: ManagementFilterChipsProps<TValue>) {
+  return (
+    <div aria-label={ariaLabel} className="workbench-management-filter-chips" role="toolbar">
+      {options.map((option) => {
+        const selected = option.value === value;
+
+        return (
+          <Button
+            key={option.value}
+            aria-pressed={selected}
+            className={cx('ui-filter-chip', selected && 'ui-filter-chip--selected')}
+            onClick={() => onChange(option.value)}
+          >
+            <span className="ui-filter-chip__label">{option.label}</span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/src/workbench/management/ManagementGroup.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { Badge } from '../../primitives/badge';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+
+export interface ManagementGroupProps {
+  children: ReactNode;
+  className?: string | undefined;
+  count?: number | undefined;
+  icon?: string | undefined;
+  label: ReactNode;
+  labelId?: string | undefined;
+  variant?: 'default' | 'section' | undefined;
+}
+
+export function ManagementGroups({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string | undefined;
+}) {
+  return <div className={cx('workbench-management-groups', className)}>{children}</div>;
+}
+
+export function ManagementGroup({
+  children,
+  className,
+  count,
+  icon,
+  label,
+  labelId,
+  variant = 'default',
+}: ManagementGroupProps) {
+  return (
+    <section
+      aria-labelledby={labelId}
+      className={cx(
+        'workbench-management-group',
+        variant === 'section' && 'workbench-management-group--section',
+        className,
+      )}
+    >
+      <header className="workbench-management-group__header">
+        {icon ? (
+          <i aria-hidden className={cx(cxCodicon(icon), 'workbench-management-group__icon')} />
+        ) : null}
+        <h3 className="workbench-management-group__title" id={labelId}>
+          {label}
+        </h3>
+        {count !== undefined ? <Badge variant="muted">{count}</Badge> : null}
+      </header>
+      {children}
+    </section>
+  );
+}

package/src/workbench/management/ManagementPanelControls.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { FilterBar, FilterBarRow } from '../../layout/panel';
+import { ClearableTextInput } from '../../primitives/clearable-text-input';
+import { cx } from '../../utils/cx';
+import { ManagementPanelSummary } from './ManagementPanelFrame.js';
+
+export interface ManagementPanelControlsProps {
+  filterLabel: string;
+  filterPlaceholder: string;
+  filters?: ReactNode;
+  query: string;
+  summary: ReactNode;
+  className?: string | undefined;
+  onQueryChange?: ((query: string) => void) | undefined;
+}
+
+export function ManagementPanelControls({
+  className,
+  filterLabel,
+  filterPlaceholder,
+  filters,
+  query,
+  summary,
+  onQueryChange,
+}: ManagementPanelControlsProps) {
+  return (
+    <FilterBar className={cx('workbench-management-controls', className)}>
+      <ClearableTextInput
+        aria-label={filterLabel}
+        className="workbench-management-search"
+        clearLabel="Clear filter"
+        placeholder={filterPlaceholder}
+        value={query}
+        onClear={() => onQueryChange?.('')}
+        onValueChange={(value) => onQueryChange?.(value)}
+      />
+      <FilterBarRow className="workbench-management-controls__meta">
+        <ManagementPanelSummary>{summary}</ManagementPanelSummary>
+        {filters}
+      </FilterBarRow>
+    </FilterBar>
+  );
+}

package/src/workbench/management/ManagementPanelFrame.tsx

@@ -0,0 +1,109 @@
+import { useState, type ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+import { WorkbenchSettingsSection } from '../settings/WorkbenchSettingsSection';
+import { ManagementPanelControls } from './ManagementPanelControls.js';
+import type { CommandManagementRunState } from './types.js';
+import { formatCommandRunState } from './format-command-run-state.js';
+
+export interface ManagementPanelFrameProps {
+  children: ReactNode;
+  id: string;
+  title: ReactNode;
+  className?: string | undefined;
+  description?: ReactNode | undefined;
+}
+
+export function ManagementPanelFrame({
+  children,
+  className,
+  description,
+  id,
+  title,
+}: ManagementPanelFrameProps) {
+  return (
+    <div className={cx('workbench-management-panel', className)}>
+      <WorkbenchSettingsSection description={description} id={id} title={title}>
+        {children}
+      </WorkbenchSettingsSection>
+    </div>
+  );
+}
+
+export function useManagementPanelQuery(controlledQuery: string | undefined) {
+  const [uncontrolledQuery, setUncontrolledQuery] = useState('');
+
+  return {
+    query: controlledQuery ?? uncontrolledQuery,
+    updateQuery: controlledQuery === undefined ? setUncontrolledQuery : undefined,
+  };
+}
+
+export interface ManagementPanelToolbarProps {
+  filterLabel: string;
+  filterPlaceholder: string;
+  query: string;
+  summary: ReactNode;
+  onQueryChange?: ((query: string) => void) | undefined;
+}
+
+export function ManagementPanelToolbar({
+  filterLabel,
+  filterPlaceholder,
+  query,
+  summary,
+  onQueryChange,
+}: ManagementPanelToolbarProps) {
+  return (
+    <ManagementPanelControls
+      filterLabel={filterLabel}
+      filterPlaceholder={filterPlaceholder}
+      query={query}
+      summary={summary}
+      onQueryChange={onQueryChange}
+    />
+  );
+}
+
+export function ManagementPanelSummary({ children }: { children: ReactNode }) {
+  return (
+    <p className="workbench-management-summary" role="status">
+      {children}
+    </p>
+  );
+}
+
+export function ManagementPanelEmptyState({ children }: { children: ReactNode }) {
+  return <p className="workbench-management-empty">{children}</p>;
+}
+
+export function ManagementPanelNotice({ children }: { children: ReactNode }) {
+  return <p className="workbench-management-notice">{children}</p>;
+}
+
+export function ManagementPanelRunState({
+  lastRun,
+}: {
+  lastRun: CommandManagementRunState | undefined;
+}) {
+  const runStateLabel = formatCommandRunState(lastRun);
+  if (!runStateLabel) {
+    return null;
+  }
+
+  return (
+    <p
+      aria-live="polite"
+      className={cx(
+        'workbench-management-run-state',
+        lastRun?.status === 'error' && 'workbench-management-run-state--error',
+        lastRun?.status === 'running' && 'workbench-management-run-state--running',
+      )}
+      role="status"
+    >
+      {lastRun?.status === 'running' ? (
+        <i aria-hidden className="codicon codicon-loading codicon-modifier-spin" />
+      ) : null}
+      <span>{runStateLabel}</span>
+    </p>
+  );
+}