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

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/SideBarViewFrame.tsx

@@ -0,0 +1,235 @@
+import './sidebar-view.css';
+import type { ComponentPropsWithRef, CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import { cx } from '../../utils/cx';
+import {
+  Panel,
+  PanelBody,
+  PanelHeader,
+  type PanelBodyProps,
+  type PanelProps,
+} from '../panel/Panel';
+import { workbenchTreeIndentOffset } from '../layoutHelpers';
+import { useSidebarSectionBaseDepth } from './SidebarSectionNestingContext';
+
+type SideBarFooterPlacement = 'static' | 'overlay';
+
+export interface SideBarViewFrameProps extends Omit<PanelProps, 'children' | 'title'> {
+  actions?: ReactNode;
+  bodyClassName?: string;
+  bodyProps?: PanelBodyProps;
+  children: ReactNode;
+  footer?: ReactNode;
+  footerPlacement?: SideBarFooterPlacement;
+  headerAddon?: ReactNode;
+  title?: ReactNode;
+}
+
+export function SideBarViewFrame({
+  actions,
+  bodyClassName,
+  bodyProps,
+  children,
+  className,
+  footer,
+  footerPlacement = 'static',
+  headerAddon,
+  style,
+  title,
+  ...props
+}: SideBarViewFrameProps) {
+  const { className: bodyPropsClassName, ...resolvedBodyProps } = bodyProps ?? {};
+  const hasFooter = footer !== undefined && footer !== null && footer !== false;
+  const hasOverlayFooterSlot = footerPlacement === 'overlay';
+  const shouldRenderFooterSlot = hasOverlayFooterSlot || hasFooter;
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [footerHeight, setFooterHeight] = useState(0);
+  const showHeader = Boolean(title || actions || headerAddon);
+
+  // Overlay footers float above scroll content; expose the measured height so spacers keep final rows reachable.
+  useLayoutEffect(() => {
+    const element = footerRef.current;
+    if (!element || !hasOverlayFooterSlot) {
+      setFooterHeight(0);
+      return undefined;
+    }
+
+    const updateFooterHeight = () => {
+      const nextHeight = Math.ceil(element.getBoundingClientRect().height);
+      setFooterHeight((currentHeight) =>
+        currentHeight === nextHeight ? currentHeight : nextHeight,
+      );
+    };
+
+    updateFooterHeight();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const resizeObserver = new ResizeObserver(updateFooterHeight);
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.disconnect();
+  }, [hasOverlayFooterSlot]);
+
+  const panelStyle = {
+    '--ui-sidebar-footer-height': `${footerHeight}px`,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <Panel className={cx('ui-sidebar-view', className)} style={panelStyle} {...props}>
+      {showHeader ? (
+        <PanelHeader actions={actions} className="ui-sidebar-view__header" reserveActionsSlot>
+          {title}
+        </PanelHeader>
+      ) : null}
+      {headerAddon ? <div className="ui-sidebar-view__header-addon">{headerAddon}</div> : null}
+      <PanelBody
+        gutter="auto"
+        {...resolvedBodyProps}
+        className={cx('ui-sidebar-view__body', bodyClassName, bodyPropsClassName)}
+      >
+        {children}
+        {hasOverlayFooterSlot ? <SideBarScrollSpacer /> : null}
+      </PanelBody>
+      {shouldRenderFooterSlot ? (
+        <div
+          ref={hasOverlayFooterSlot ? footerRef : undefined}
+          className={cx(
+            'panel-footer',
+            'ui-sidebar-view__footer',
+            hasOverlayFooterSlot && 'ui-sidebar-view__footer--overlay',
+            !hasFooter && 'ui-sidebar-view__footer--empty',
+          )}
+          data-has-footer-content={hasFooter ? 'true' : 'false'}
+        >
+          {footer}
+        </div>
+      ) : null}
+    </Panel>
+  );
+}
+
+export interface SideBarListProps extends ComponentPropsWithRef<'ul'> {
+  children?: ReactNode;
+  dropTarget?: boolean;
+  fill?: boolean;
+}
+
+export function SideBarList({ className, dropTarget, fill, ...props }: SideBarListProps) {
+  return (
+    <ul
+      className={cx(
+        'ui-sidebar-list',
+        fill && 'ui-sidebar-list--fill',
+        dropTarget && 'ui-sidebar-list--drop-target',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface SideBarListItemProps extends ComponentPropsWithRef<'button'> {
+  active?: boolean;
+  after?: ReactNode;
+  depth?: number;
+  dropTarget?: boolean;
+  noLi?: boolean;
+  selected?: boolean;
+  variant?: 'default' | 'stacked';
+  wrapperProps?: HTMLAttributes<HTMLLIElement>;
+}
+
+export function sideBarTreeDepthStyle(depth: number, style?: CSSProperties): CSSProperties {
+  return {
+    '--depth': depth,
+    '--ui-sidebar-tree-indent-offset': workbenchTreeIndentOffset(depth),
+    ...style,
+  } as CSSProperties;
+}
+
+export const SideBarListItem = forwardRef<HTMLButtonElement, SideBarListItemProps>(
+  function SideBarListItem(
+    {
+      active,
+      after,
+      'aria-current': ariaCurrent,
+      className,
+      depth = 0,
+      dropTarget,
+      noLi,
+      selected,
+      style,
+      type = 'button',
+      variant = 'default',
+      wrapperProps,
+      ...props
+    },
+    ref,
+  ) {
+    const sectionBaseDepth = useSidebarSectionBaseDepth();
+    const resolvedDepth = sectionBaseDepth + depth;
+    const depthStyle = sideBarTreeDepthStyle(resolvedDepth, style);
+    const { className: wrapperClassName, ...restWrapperProps } = wrapperProps ?? {};
+
+    const button = (
+      <button
+        ref={ref}
+        type={type}
+        aria-current={ariaCurrent ?? (active ? 'true' : undefined)}
+        className={cx(
+          'ui-sidebar-list-item',
+          variant === 'stacked' && 'ui-sidebar-list-item--stacked',
+          active && 'ui-sidebar-list-item--active',
+          selected && 'ui-sidebar-list-item--selected',
+          dropTarget && 'ui-sidebar-list-item--drop-target',
+          className,
+        )}
+        data-selected={selected ? 'true' : undefined}
+        style={depthStyle}
+        {...props}
+      />
+    );
+
+    if (noLi) {
+      if (after) {
+        return (
+          <>
+            {button}
+            {after}
+          </>
+        );
+      }
+      return button;
+    }
+
+    return (
+      <li className={cx('ui-sidebar-list-entry', wrapperClassName)} {...restWrapperProps}>
+        {button}
+        {after}
+      </li>
+    );
+  },
+);
+
+export type SideBarRowProps = ComponentPropsWithRef<'div'>;
+
+export function SideBarRow({ className, ...props }: SideBarRowProps) {
+  return <div className={cx('ui-sidebar-row', className)} {...props} />;
+}
+
+export type SideBarHeaderControlProps = ComponentPropsWithRef<'div'>;
+
+export function SideBarHeaderControl({ className, ...props }: SideBarHeaderControlProps) {
+  return <div className={cx('ui-sidebar-header-control', className)} {...props} />;
+}
+
+export type SideBarScrollSpacerProps = ComponentPropsWithRef<'div'>;
+
+export const SideBarScrollSpacer = forwardRef<HTMLDivElement, SideBarScrollSpacerProps>(
+  function SideBarScrollSpacer({ className, ...props }, ref) {
+    return <div ref={ref} className={cx('ui-sidebar-scroll-spacer', className)} {...props} />;
+  },
+);

package/src/layout/sidebar/SideBarViewTabStrip.tsx

@@ -0,0 +1,60 @@
+import './sidebar-chrome.css';
+import type { ComponentPropsWithRef } from 'react';
+
+import type { WorkbenchIconInput } from '../../icons/types';
+import { cx } from '../../utils/cx';
+import { SidebarActionIconBar } from './SidebarActionIconBar';
+
+export interface SideBarViewTabDescriptor {
+  readonly active?: boolean | undefined;
+  readonly dataAttributes?: Readonly<Record<string, string | undefined>> | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly icon: WorkbenchIconInput;
+  readonly id: string;
+  readonly label: string;
+  readonly onSelect: () => void;
+}
+
+export interface SideBarViewTabStripProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  readonly acceptSidebarViewPlacementDrop?: ((viewId: string) => boolean) | undefined;
+  readonly onSidebarViewPlacementDrop?: ((viewId: string) => void) | undefined;
+  readonly onTabsReorder?: ((tabIds: string[]) => void) | undefined;
+  readonly placementDraggable?: boolean | undefined;
+  readonly reorderable?: boolean | undefined;
+  readonly sidebarViewPlacementDropZoneId?: string | undefined;
+  readonly tabs: readonly SideBarViewTabDescriptor[];
+}
+
+export function SideBarViewTabStrip({
+  className,
+  onTabsReorder,
+  placementDraggable = false,
+  reorderable = false,
+  tabs,
+  ...props
+}: SideBarViewTabStripProps) {
+  if (tabs.length === 0) {
+    return null;
+  }
+
+  return (
+    <SidebarActionIconBar
+      actions={tabs.map((tab) => ({
+        active: tab.active,
+        dataAttributes: tab.dataAttributes,
+        disabled: tab.disabled,
+        icon: tab.icon,
+        id: tab.id,
+        label: tab.label,
+        onSelect: tab.onSelect,
+      }))}
+      className={cx('ui-sidebar-view-tab-strip', className)}
+      data-ui-sidebar-view-tab-strip="true"
+      onActionsReorder={onTabsReorder}
+      orientation="horizontal"
+      placementDraggable={placementDraggable}
+      reorderable={reorderable}
+      {...props}
+    />
+  );
+}

package/src/layout/sidebar/SideBarViewTitleMenu.tsx

@@ -0,0 +1,75 @@
+import { useCallback, useMemo, useState, type MouseEvent, type ReactNode } from 'react';
+
+import { ContextMenu } from '../../overlay/ContextMenu';
+import { IconButton } from '../../primitives/icon-button';
+import type { WorkbenchSidebarSlotId } from '@workbench-kit/platform';
+import { oppositeWorkbenchSidebarSlot } from '@workbench-kit/platform';
+
+export interface SideBarViewTitleMenuProps {
+  readonly currentSlot: WorkbenchSidebarSlotId;
+  readonly menuAriaLabel: string;
+  readonly menuButtonLabel: string;
+  readonly moveToPrimaryLabel: string;
+  readonly moveToSecondaryLabel: string;
+  readonly onMoveToSlot?: ((targetSlot: WorkbenchSidebarSlotId) => void) | undefined;
+  readonly viewId?: string | undefined;
+}
+
+export function SideBarViewTitleMenu({
+  currentSlot,
+  menuAriaLabel,
+  menuButtonLabel,
+  moveToPrimaryLabel,
+  moveToSecondaryLabel,
+  onMoveToSlot,
+  viewId,
+}: SideBarViewTitleMenuProps): ReactNode {
+  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
+  const targetSlot = oppositeWorkbenchSidebarSlot(currentSlot);
+
+  const openMenu = useCallback((event: MouseEvent<HTMLButtonElement>): void => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setMenuPosition({
+      x: rect.left,
+      y: rect.bottom + 4,
+    });
+  }, []);
+
+  const moveView = useCallback((): void => {
+    onMoveToSlot?.(targetSlot);
+    setMenuPosition(null);
+  }, [onMoveToSlot, targetSlot]);
+
+  const menuItems = useMemo(
+    () => [
+      {
+        id: 'move-view',
+        label: targetSlot === 'secondary' ? moveToSecondaryLabel : moveToPrimaryLabel,
+        onSelect: moveView,
+        type: 'item' as const,
+      },
+    ],
+    [moveToPrimaryLabel, moveToSecondaryLabel, moveView, targetSlot],
+  );
+
+  return (
+    <>
+      <IconButton
+        compact
+        data-side-bar-view-title-menu={viewId}
+        icon="codicon-ellipsis"
+        label={menuButtonLabel}
+        onClick={openMenu}
+      />
+      {menuPosition ? (
+        <ContextMenu
+          ariaLabel={menuAriaLabel}
+          items={menuItems}
+          x={menuPosition.x}
+          y={menuPosition.y}
+          onClose={() => setMenuPosition(null)}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/layout/sidebar/SidebarActionIconBar.tsx

@@ -0,0 +1,242 @@
+import './sidebar-chrome.css';
+import { useCallback } from 'react';
+
+import type { ComponentPropsWithRef, MouseEvent as ReactMouseEvent } from 'react';
+
+import { ContextMenu, type ContextMenuItem } from '../../overlay/ContextMenu';
+import { useContextMenuState } from '../../overlay/useContextMenuState';
+
+import type { WorkbenchIconInput } from '../../icons/types';
+
+import { IconButton } from '../../primitives/icon-button';
+
+import { cx } from '../../utils/cx';
+
+import { type ActivityBarOrientation } from '../../workbench/activityBarOrder';
+
+import {
+  mergeWorkbenchSidebarViewPlacementDropZoneProps,
+  useWorkbenchSidebarViewPlacementDropZone,
+} from '../../workbench/useWorkbenchSidebarViewPlacementDropZone';
+
+import { useWorkbenchSidebarActionBarDnd } from '../../workbench/useWorkbenchSidebarActionBarDnd';
+
+import { SidebarToolbar } from './SidebarToolbar';
+
+export interface SidebarActionIconDescriptor {
+  readonly active?: boolean | undefined;
+
+  readonly dataAttributes?: Readonly<Record<string, string | undefined>> | undefined;
+
+  readonly disabled?: boolean | undefined;
+
+  readonly icon: WorkbenchIconInput;
+
+  readonly id: string;
+
+  readonly label: string;
+
+  readonly onSelect: () => void;
+}
+
+export interface SidebarActionIconBarProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  readonly acceptSidebarViewPlacementDrop?: ((viewId: string) => boolean) | undefined;
+  readonly actions?: readonly SidebarActionIconDescriptor[] | undefined;
+
+  readonly onActionsReorder?: ((actionIds: string[]) => void) | undefined;
+
+  readonly onSidebarViewPlacementDrop?: ((viewId: string) => void) | undefined;
+
+  readonly orientation?: ActivityBarOrientation | undefined;
+
+  readonly overflowActions?: readonly SidebarActionIconDescriptor[] | undefined;
+
+  readonly overflowMenuLabel?: string | undefined;
+
+  readonly placementDraggable?: boolean | undefined;
+
+  readonly reorderable?: boolean | undefined;
+
+  readonly sidebarViewPlacementDropZoneId?: string | undefined;
+}
+
+function toContextMenuItems(actions: readonly SidebarActionIconDescriptor[]): ContextMenuItem[] {
+  return actions.map((action) => ({
+    disabled: action.disabled,
+    icon: typeof action.icon === 'string' ? action.icon : undefined,
+    id: action.id,
+    label: action.label,
+    onSelect: action.onSelect,
+  }));
+}
+
+function resolveActionDataAttributes(
+  dataAttributes: SidebarActionIconDescriptor['dataAttributes'],
+): Record<string, string | undefined> {
+  return dataAttributes ?? {};
+}
+
+export function SidebarActionIconBar({
+  acceptSidebarViewPlacementDrop,
+  actions = [],
+
+  className,
+
+  onActionsReorder,
+
+  onSidebarViewPlacementDrop,
+
+  orientation = 'horizontal',
+
+  overflowActions = [],
+
+  overflowMenuLabel = 'More actions',
+
+  placementDraggable = false,
+
+  reorderable = false,
+
+  sidebarViewPlacementDropZoneId,
+
+  ...toolbarProps
+}: SidebarActionIconBarProps) {
+  const {
+    close: closeOverflowMenu,
+    openAt: openOverflowMenuAt,
+    state: overflowMenu,
+  } = useContextMenuState<'overflow'>();
+
+  const { draggingItemId, getDropPosition, getItemDragHandlers } = useWorkbenchSidebarActionBarDnd({
+    itemIds: actions.map((action) => action.id),
+    onReorder: onActionsReorder,
+    orientation,
+    placementDraggable,
+    reorderable,
+  });
+
+  const placementDropZoneProps = useWorkbenchSidebarViewPlacementDropZone({
+    acceptViewForDrop:
+      onSidebarViewPlacementDrop === undefined
+        ? () => false
+        : (acceptSidebarViewPlacementDrop ??
+          ((viewId) => !actions.some((action) => action.id === viewId))),
+    onDropView: onSidebarViewPlacementDrop ?? (() => undefined),
+    zoneId: sidebarViewPlacementDropZoneId,
+  });
+
+  const mergedToolbarProps =
+    onSidebarViewPlacementDrop === undefined
+      ? toolbarProps
+      : mergeWorkbenchSidebarViewPlacementDropZoneProps(placementDropZoneProps, toolbarProps);
+
+  const openOverflowMenu = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      openOverflowMenuAt({ x: rect.left, y: rect.bottom + 4 }, 'overflow');
+    },
+    [openOverflowMenuAt],
+  );
+  if (actions.length === 0 && overflowActions.length === 0) {
+    return null;
+  }
+
+  const renderAction = (action: SidebarActionIconDescriptor) => {
+    const dropPosition = getDropPosition(action.id);
+    const dragHandlers = getItemDragHandlers(action.id, { disabled: action.disabled });
+
+    const button = (
+      <IconButton
+        aria-pressed={action.active ? true : undefined}
+        className={cx(
+          'ui-sidebar-action-icon-bar__button',
+          action.active && 'ui-sidebar-action-icon-bar__button--active',
+        )}
+        compact
+        data-drop-position={dropPosition}
+        disabled={action.disabled}
+        icon={action.icon}
+        label={action.label}
+        title={action.label}
+        onClick={action.onSelect}
+        {...resolveActionDataAttributes(action.dataAttributes)}
+      />
+    );
+
+    if (dragHandlers === null) {
+      return button;
+    }
+
+    return (
+      <span
+        className={cx(
+          'ui-sidebar-action-icon-bar__item-host',
+          reorderable && 'ui-sidebar-action-icon-bar__item-host--reorderable',
+          placementDraggable && 'ui-sidebar-action-icon-bar__item-host--placement-draggable',
+          draggingItemId === action.id && 'ui-sidebar-action-icon-bar__item-host--dragging',
+        )}
+        {...dragHandlers}
+      >
+        {dropPosition !== undefined ? (
+          <span
+            aria-hidden
+            className={cx(
+              'ui-sidebar-action-icon-bar__drop-indicator',
+              dropPosition === 'before'
+                ? 'ui-sidebar-action-icon-bar__drop-indicator--before'
+                : 'ui-sidebar-action-icon-bar__drop-indicator--after',
+            )}
+          />
+        ) : null}
+        {button}
+      </span>
+    );
+  };
+
+  return (
+    <>
+      <SidebarToolbar
+        className={cx(
+          'ui-sidebar-action-icon-bar',
+
+          orientation === 'horizontal' && 'ui-sidebar-action-icon-bar--horizontal',
+
+          reorderable && 'ui-sidebar-action-icon-bar--reorderable',
+
+          className,
+        )}
+        data-ui-sidebar-action-icon-bar="true"
+        {...mergedToolbarProps}
+      >
+        {actions.map((action) => (
+          <span key={action.id} className="ui-sidebar-action-icon-bar__item">
+            {renderAction(action)}
+          </span>
+        ))}
+
+        {overflowActions.length > 0 ? (
+          <IconButton
+            aria-expanded={overflowMenu !== null}
+            aria-haspopup="menu"
+            className="ui-sidebar-action-icon-bar__overflow"
+            compact
+            icon="ellipsis"
+            label={overflowMenuLabel}
+            title={overflowMenuLabel}
+            onClick={openOverflowMenu}
+          />
+        ) : null}
+      </SidebarToolbar>
+
+      {overflowMenu && overflowActions.length > 0 ? (
+        <ContextMenu
+          ariaLabel={overflowMenuLabel}
+          className="ui-sidebar-action-icon-bar__menu"
+          items={toContextMenuItems(overflowActions)}
+          x={overflowMenu.x}
+          y={overflowMenu.y}
+          onClose={closeOverflowMenu}
+        />
+      ) : null}
+    </>
+  );
+}