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

package/src/primitives/index.ts

@@ -1,60 +1,142 @@
-export { AbsoluteBox } from './AbsoluteBox';
-export type { AbsoluteBoxProps, WorkbenchRect } from './AbsoluteBox';
-export { Badge } from './Badge';
-export type { BadgeProps } from './Badge';
-export { Button } from './Button';
-export type { ButtonProps } from './Button';
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
-export { EmptyState } from './EmptyState';
-export type { EmptyStateProps } from './EmptyState';
-export { Field } from './Field';
-export type { FieldProps } from './Field';
-export { IconButton } from './IconButton';
-export type { IconButtonProps } from './IconButton';
-export { List, ListEmptyState, ListItem, ListItemActionButton } from './List';
+export { AbsoluteBox } from './absolute-box/AbsoluteBox';
+export type { AbsoluteBoxProps, WorkbenchRect } from './absolute-box/AbsoluteBox';
+export { Badge } from './badge/Badge';
+export type { BadgeProps } from './badge/Badge';
+export { Button } from './button/Button';
+export type { ButtonProps } from './button/Button';
+export { Checkbox } from './checkbox/Checkbox';
+export type { CheckboxProps } from './checkbox/Checkbox';
+export { Chip } from './chip';
+export type { ChipProps } from './chip';
+export { EmptyState } from './empty-state/EmptyState';
+export type { EmptyStateProps } from './empty-state/EmptyState';
+export { PanelLoading } from './panel-loading/PanelLoading';
+export type { PanelLoadingProps } from './panel-loading/PanelLoading';
+export { Field } from './field/Field';
+export type { FieldProps } from './field/Field';
+export { Codicon } from './codicon/Codicon';
+export type { CodiconProps } from './codicon/Codicon';
+export { IconButton } from './icon-button/IconButton';
+export type { IconButtonProps } from './icon-button/IconButton';
+export { List, ListEmptyState, ListItem, ListItemActionButton } from './list/List';
 export type {
   ListEmptyStateProps,
   ListItemActionButtonProps,
   ListItemProps,
   ListProps,
-} from './List';
-export { NumberInput } from './NumberInput';
-export type { NumberInputProps } from './NumberInput';
-export { Select } from './Select';
-export type { SelectProps } from './Select';
-export { ScrollArea } from './ScrollArea';
+} from './list/List';
+export { NumberInput } from './number-input/NumberInput';
+export type { NumberInputProps } from './number-input/NumberInput';
+export { Select } from './select';
+export type { SelectProps } from './select';
+export { SearchableMultiSelect } from './searchable-multi-select';
+export type {
+  SearchableMultiSelectOption,
+  SearchableMultiSelectProps,
+} from './searchable-multi-select';
+export {
+  SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR,
+  isSearchableMultiSelectPortalTarget,
+} from './searchable-multi-select';
+export { ScrollArea } from './scroll-area/ScrollArea';
 export type {
   ScrollAreaGutter,
   ScrollAreaOrientation,
   ScrollAreaProps,
   ScrollAreaScrollbarVisibility,
-} from './ScrollArea';
-export { StatusBar, StatusBarLabel, StatusBarSection } from './StatusBar';
-export type {
-  StatusBarLabelProps,
-  StatusBarProps,
-  StatusBarSectionAlign,
-  StatusBarSectionProps,
-  StatusBarSeverity,
-} from './StatusBar';
-export { TextInput } from './TextInput';
-export type { ControlWidth, TextInputProps } from './TextInput';
-export { TextArea } from './TextArea';
-export type { TextAreaProps } from './TextArea';
-export { Toolbar } from './Toolbar';
-export type { ToolbarProps } from './Toolbar';
-export { ActivityBar, Collapsible, SideBar, TabbedPanels, WorkbenchShell } from './WorkbenchChrome';
-export type {
-  ActivityBarProps,
-  ActivityItem,
-  CollapsibleProps,
-  SideBarProps,
-  TabbedPanelItem,
-  TabbedPanelsProps,
-  WorkbenchShellProps,
-} from './WorkbenchChrome';
-export { ButtonGroup, EditorTabs, ResizablePanels, SegmentedControl } from './WorkbenchEditor';
+} from './scroll-area/ScrollArea';
+export { ClearableTextInput } from './clearable-text-input/ClearableTextInput';
+export type { ClearableTextInputProps } from './clearable-text-input/ClearableTextInput';
+export { ExternalLinkButton, ExternalLinkRow } from './external-link-button/ExternalLinkButton';
+export { TextInput } from './text-input/TextInput';
+export type { ControlWidth, TextInputProps } from './text-input/TextInput';
+export { TextArea } from './text-area/TextArea';
+export type { TextAreaProps } from './text-area/TextArea';
+export { Toolbar } from './toolbar/Toolbar';
+export type { ToolbarProps } from './toolbar/Toolbar';
+export { ViewEmptyState } from '../layout/ViewEmptyState';
+export type { ViewEmptyStateProps } from '../layout/ViewEmptyState';
+export { SidebarToolbar } from '../layout/sidebar';
+export type { SidebarToolbarProps } from '../layout/sidebar';
+export { TabbedPanels } from './tabbed-panels';
+export type { TabbedPanelItem, TabbedPanelsProps } from './tabbed-panels';
+export { FileIcon, UI_FILE_ICON_CLASS } from './file-icon/FileIcon';
+export type { FileIconProps } from './file-icon/FileIcon';
+export { CatalogBrowseCard } from './catalog-browse-card/CatalogBrowseCard';
+export type {
+  CatalogBrowseCardProps,
+  CatalogBrowseCardVariant,
+} from './catalog-browse-card/CatalogBrowseCard';
+export { RecordMediaHero } from './record-media-hero/RecordMediaHero';
+export type {
+  RecordMediaHeroLayout,
+  RecordMediaHeroProps,
+} from './record-media-hero/RecordMediaHero';
+export { CatalogBrowseFacetChips } from './catalog-browse-pane/CatalogBrowseFacetChips';
+export type {
+  CatalogBrowseFacetChipsProps,
+  CatalogBrowseFacetOption,
+} from './catalog-browse-pane/CatalogBrowseFacetChips';
+export { CatalogBrowsePane } from './catalog-browse-pane/CatalogBrowsePane';
+export type {
+  CatalogBrowseItem,
+  CatalogBrowseItemRenderState,
+  CatalogBrowsePaneProps,
+  CatalogBrowseViewMode,
+} from './catalog-browse-pane/CatalogBrowsePane';
+export {
+  filterCatalogBrowseItems,
+  matchCatalogBrowseItem,
+} from './catalog-browse-pane/filterCatalogBrowseItems';
+export { LibraryFacetFilterStrip } from './library-facet-filter-strip/LibraryFacetFilterStrip';
+export type {
+  LibraryFacetActiveChip,
+  LibraryFacetField,
+  LibraryFacetFieldKind,
+  LibraryFacetFieldOption,
+  LibraryFacetFieldPresentation,
+  LibraryFacetFilterStripProps,
+} from './library-facet-filter-strip/LibraryFacetFilterStrip';
+export { LibraryFacetFilterPanel } from './library-facet-filter-panel/LibraryFacetFilterPanel';
+export type {
+  LibraryFacetFilterPanelLabels,
+  LibraryFacetFilterPanelProps,
+  LibraryFacetSection,
+} from './library-facet-filter-panel/LibraryFacetFilterPanel';
+export { CatalogFilterOverlay } from './catalog-filter-overlay/CatalogFilterOverlay';
+export type { CatalogFilterOverlayProps } from './catalog-filter-overlay/CatalogFilterOverlay';
+export { LibraryDetailLayout } from './library-detail-layout/LibraryDetailLayout';
+export type {
+  LibraryDetailLayoutMode,
+  LibraryDetailLayoutProps,
+} from './library-detail-layout/LibraryDetailLayout';
+export { resolveLibraryDetailHeroCoverMedia } from './library-detail-layout/resolve-hero-cover-media.js';
+export type {
+  ResolveLibraryDetailHeroCoverMediaInput,
+  ResolvedLibraryDetailHeroCoverMedia,
+} from './library-detail-layout/resolve-hero-cover-media.js';
+export { ScrollAreaInfiniteSentinel } from './scroll-area-infinite-load/ScrollAreaInfiniteSentinel';
+export type { ScrollAreaInfiniteSentinelProps } from './scroll-area-infinite-load/ScrollAreaInfiniteSentinel';
+export { useScrollAreaInfiniteLoad } from './scroll-area-infinite-load/useScrollAreaInfiniteLoad';
+export type {
+  UseScrollAreaInfiniteLoadOptions,
+  UseScrollAreaInfiniteLoadResult,
+} from './scroll-area-infinite-load/useScrollAreaInfiniteLoad';
+export { WorkbenchMediaPlaceholder } from './workbench-media-slot/WorkbenchMediaPlaceholder';
+export type { WorkbenchMediaPlaceholderProps } from './workbench-media-slot/WorkbenchMediaPlaceholder';
+export { WorkbenchMediaSlot } from './workbench-media-slot/WorkbenchMediaSlot';
+export type { WorkbenchMediaSlotProps } from './workbench-media-slot/WorkbenchMediaSlot';
+export { WorkbenchThumbnail } from './workbench-thumbnail/WorkbenchThumbnail';
+export type {
+  WorkbenchThumbnailProps,
+  WorkbenchThumbnailSize,
+} from './workbench-thumbnail/WorkbenchThumbnail';
+export {
+  ButtonGroup,
+  EditorTabs,
+  ResizablePanels,
+  SegmentedControl,
+} from './workbench-editor/WorkbenchEditor';
 export type {
   ButtonGroupProps,
   EditorTab,
@@ -63,30 +145,90 @@ export type {
   ResizablePanelsProps,
   SegmentedControlOption,
   SegmentedControlProps,
-} from './WorkbenchEditor';
+} from './workbench-editor/WorkbenchEditor';
 export {
   FilterBar,
   FilterBarActiveChips,
+  FilterBarRow,
   FilterChip,
   HelpText,
   Panel,
   PanelBody,
   PanelFooter,
   PanelHeader,
-} from '../layout/Panel';
+} from '../layout/panel';
+export { WorkbenchLabeledPane } from '../layout/panel';
+export {
+  WorkbenchAuthoringShell,
+  WorkbenchPlainTextSource,
+  WorkbenchSurfaceMeta,
+  WorkbenchSurfaceToolbar,
+} from '../layout/panel';
+export { WorkbenchSidebarStack } from '../layout/panel';
 export type {
   FilterBarActiveChipsProps,
   FilterBarProps,
+  FilterBarRowProps,
   FilterChipProps,
   HelpTextProps,
   PanelBodyProps,
   PanelFooterProps,
   PanelHeaderProps,
   PanelProps,
-} from '../layout/Panel';
+  WorkbenchAuthoringShellProps,
+  WorkbenchLabeledPaneChrome,
+  WorkbenchLabeledPaneProps,
+  WorkbenchLabeledPaneTone,
+  WorkbenchPlainTextSourceProps,
+  WorkbenchSurfaceMetaProps,
+  WorkbenchSurfaceToolbarProps,
+  WorkbenchSidebarStackProps,
+} from '../layout/panel';
+export {
+  WorkbenchBanner,
+  WorkbenchBannerIcon,
+  WorkbenchBannerMessage,
+  WorkbenchCenter,
+  WorkbenchFill,
+  WorkbenchFillChain,
+  WorkbenchPane,
+  WorkbenchPanelScroll,
+  WorkbenchPanelSurface,
+  WorkbenchRoot,
+  WorkbenchScrollRegion,
+} from '../layout/WorkbenchLayoutBase';
+export type {
+  WorkbenchBannerIconProps,
+  WorkbenchBannerMessageProps,
+  WorkbenchBannerProps,
+  WorkbenchCenterProps,
+  WorkbenchFillChainProps,
+  WorkbenchFillProps,
+  WorkbenchPaneProps,
+  WorkbenchPanelScrollProps,
+  WorkbenchPanelSurfaceProps,
+  WorkbenchRootProps,
+  WorkbenchScrollRegionProps,
+} from '../layout/WorkbenchLayoutBase';
+export {
+  WORKBENCH_FILL_SCROLL_ROLE_ATTR,
+  isWorkbenchFillOwner,
+  isWorkbenchScrollOwner,
+  resolveWorkbenchFillScrollRole,
+  workbenchFillScrollRoleProps,
+} from '../layout/fillScrollContract';
+export type {
+  WorkbenchFillScrollOwnerRegistry,
+  WorkbenchFillScrollRole,
+  WorkbenchFillScrollRoleProps,
+} from '../layout/fillScrollContract';
 export {
   WorkbenchParseError,
+  WorkbenchPropertyCard,
+  WorkbenchPropertyGrid,
   WorkbenchPropertyHint,
+  WorkbenchPropertyKeyValue,
+  WorkbenchMetricGrid,
   WorkbenchPropertyNumberRow,
   WorkbenchPropertyPanel,
   WorkbenchPropertyRow,
@@ -96,10 +238,33 @@ export {
 } from '../layout/WorkbenchPropertyPanel';
 export type {
   WorkbenchParseErrorProps,
+  WorkbenchPropertyCardProps,
+  WorkbenchPropertyGridProps,
+  WorkbenchPropertyKeyValueProps,
   WorkbenchPropertyNumberRowProps,
   WorkbenchPropertyPanelProps,
   WorkbenchPropertyRowProps,
+  WorkbenchMetricGridEntry,
+  WorkbenchMetricGridItem,
+  WorkbenchMetricGridProps,
+  WorkbenchPropertySectionLevel,
   WorkbenchPropertySectionProps,
   WorkbenchPropertyStackProps,
   WorkbenchPropertyTextRowProps,
 } from '../layout/WorkbenchPropertyPanel';
+export { WorkbenchPropertyOverrideLabel } from '../layout/WorkbenchPropertyOverrideLabel';
+export type {
+  WorkbenchPropertyOverrideLabelProps,
+  WorkbenchPropertyOverrideResetAppearance,
+} from '../layout/WorkbenchPropertyOverrideLabel';
+export { WorkbenchPropertySearch } from '../layout/WorkbenchPropertySearch';
+export type { WorkbenchPropertySearchProps } from '../layout/WorkbenchPropertySearch';
+export {
+  filterWorkbenchPropertyFields,
+  isWorkbenchPropertySearchActive,
+} from '../layout/propertyFieldFilter';
+export type {
+  WorkbenchPropertyFieldFilterInput,
+  WorkbenchPropertyFieldFilterResult,
+  WorkbenchPropertyFieldManifestEntry,
+} from '../layout/propertyFieldFilter';

package/src/primitives/library-detail-layout/LibraryDetailLayout.tsx

@@ -0,0 +1,249 @@
+import './library-detail-layout.css';
+import { useEffect, useState, type ComponentPropsWithRef, type ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
+import { RecordMediaHero } from '../record-media-hero';
+import { ScrollArea } from '../scroll-area';
+import { resolveLibraryDetailHeroCoverMedia } from './resolve-hero-cover-media.js';
+
+export type LibraryDetailLayoutMode = 'background' | 'banner' | 'compact' | 'hero-cover';
+
+export interface LibraryDetailLayoutProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'title'
+> {
+  readonly actions?: ReactNode;
+  /** Optional attribution / footer below the identity row (`hero-cover` mode). */
+  readonly attribution?: ReactNode;
+  readonly backgroundImageUrl?: string | null;
+  readonly children?: ReactNode;
+  readonly coverAlt?: string;
+  readonly coverImageUrl?: string | null;
+  readonly description?: ReactNode;
+  /**
+   * Wide hero band URL for `hero-cover` mode. When omitted or identical to
+   * `coverImageUrl`, the cover is used as soft atmosphere behind the portrait.
+   */
+  readonly heroImageUrl?: string | null;
+  readonly logoImageUrl?: string | null;
+  readonly mode?: LibraryDetailLayoutMode;
+  readonly summary?: ReactNode;
+  readonly title: ReactNode;
+  readonly toolbar?: ReactNode;
+}
+
+export function LibraryDetailLayout({
+  actions,
+  attribution,
+  backgroundImageUrl = null,
+  children,
+  className,
+  coverAlt,
+  coverImageUrl = null,
+  description,
+  heroImageUrl = null,
+  logoImageUrl = null,
+  mode = 'banner',
+  summary,
+  title,
+  toolbar,
+  ...props
+}: LibraryDetailLayoutProps): ReactNode {
+  const resolvedMode =
+    mode === 'background'
+      ? 'background'
+      : mode === 'compact'
+        ? 'compact'
+        : mode === 'hero-cover'
+          ? 'hero-cover'
+          : 'banner';
+
+  return (
+    <div
+      className={cx(
+        'ui-library-detail-layout',
+        `ui-library-detail-layout--${resolvedMode}`,
+        className,
+      )}
+      data-ui-library-detail-layout={resolvedMode}
+      {...props}
+    >
+      {toolbar}
+      {resolvedMode === 'hero-cover' ? (
+        <LibraryDetailHeroCover
+          actions={actions}
+          attribution={attribution}
+          coverAlt={coverAlt}
+          coverImageUrl={coverImageUrl}
+          description={description}
+          heroImageUrl={heroImageUrl ?? backgroundImageUrl}
+          summary={summary}
+          title={title}
+        />
+      ) : resolvedMode === 'background' ? (
+        <div className="ui-library-detail-layout__band" data-ui-library-detail-band="true">
+          <RecordMediaHero
+            alt={coverAlt}
+            className="ui-library-detail-layout__band-media"
+            fallbackIcon="library"
+            imageUrl={backgroundImageUrl}
+            layout="background"
+          />
+          <div aria-hidden className="ui-library-detail-layout__band-overlay" />
+          <div className="ui-library-detail-layout__band-content">
+            <LibraryDetailIdentity logoImageUrl={logoImageUrl} summary={summary} title={title} />
+            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
+            {description ? (
+              <div className="ui-library-detail-layout__description">{description}</div>
+            ) : null}
+          </div>
+        </div>
+      ) : (
+        <div className="ui-library-detail-layout__hero" data-ui-library-detail-hero="true">
+          <RecordMediaHero
+            alt={coverAlt}
+            className="ui-library-detail-layout__cover"
+            fallbackIcon="library"
+            imageUrl={coverImageUrl}
+            layout="compact"
+            logoUrl={logoImageUrl}
+          />
+          <div className="ui-library-detail-layout__hero-content">
+            <div className="ui-library-detail-layout__title">{title}</div>
+            {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
+            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
+            {description ? (
+              <div className="ui-library-detail-layout__description">{description}</div>
+            ) : null}
+          </div>
+        </div>
+      )}
+      {children ? (
+        <ScrollArea
+          className="ui-library-detail-layout__body"
+          data-ui-library-detail-body="true"
+          orientation="vertical"
+        >
+          {children}
+        </ScrollArea>
+      ) : null}
+    </div>
+  );
+}
+
+function LibraryDetailHeroCover({
+  actions,
+  attribution,
+  coverAlt,
+  coverImageUrl,
+  description,
+  heroImageUrl,
+  summary,
+  title,
+}: {
+  actions?: ReactNode;
+  attribution?: ReactNode;
+  coverAlt?: string;
+  coverImageUrl: string | null;
+  description?: ReactNode;
+  heroImageUrl: string | null;
+  summary?: ReactNode;
+  title: ReactNode;
+}): ReactNode {
+  const [heroFailed, setHeroFailed] = useState(false);
+  const [coverFailed, setCoverFailed] = useState(false);
+
+  useEffect(() => {
+    setHeroFailed(false);
+  }, [heroImageUrl]);
+
+  useEffect(() => {
+    setCoverFailed(false);
+  }, [coverImageUrl]);
+
+  const media = resolveLibraryDetailHeroCoverMedia({
+    heroImageUrl,
+    coverImageUrl,
+    heroFailed,
+    coverFailed,
+  });
+
+  return (
+    <div className="ui-library-detail-layout__hero-cover" data-ui-library-detail-hero-cover="true">
+      <div className="ui-library-detail-layout__band" data-ui-library-detail-band="true">
+        <RecordMediaHero
+          alt={coverAlt}
+          className={cx(
+            'ui-library-detail-layout__band-media',
+            media.bandKind === 'atmosphere' && 'ui-library-detail-layout__band-media--atmosphere',
+          )}
+          data-atmosphere={media.bandKind === 'atmosphere' ? 'true' : undefined}
+          fallbackIcon="library"
+          imageUrl={media.bandImageUrl}
+          layout="background"
+          onImageError={() => {
+            if (media.bandKind === 'hero') {
+              setHeroFailed(true);
+            } else if (media.bandKind === 'atmosphere') {
+              setCoverFailed(true);
+            }
+          }}
+        />
+        <div aria-hidden className="ui-library-detail-layout__band-overlay" />
+      </div>
+      <div className="ui-library-detail-layout__hero-cover-body">
+        {media.showPortraitCover ? (
+          <RecordMediaHero
+            alt={coverAlt}
+            className="ui-library-detail-layout__portrait-cover"
+            fallbackIcon="library"
+            imageUrl={media.resolvedCover}
+            layout="compact"
+            onImageError={() => setCoverFailed(true)}
+          />
+        ) : null}
+        <div className="ui-library-detail-layout__hero-content">
+          <div className="ui-library-detail-layout__title">{title}</div>
+          {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
+          {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
+          {description ? (
+            <div className="ui-library-detail-layout__description">{description}</div>
+          ) : null}
+          {attribution ? (
+            <div className="ui-library-detail-layout__attribution">{attribution}</div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LibraryDetailIdentity({
+  logoImageUrl,
+  summary,
+  title,
+}: {
+  logoImageUrl: string | null | undefined;
+  summary: ReactNode | undefined;
+  title: ReactNode;
+}): ReactNode {
+  return (
+    <div className="ui-library-detail-layout__identity">
+      <WorkbenchMediaSlot
+        as="div"
+        className="ui-library-detail-layout__logo-slot"
+        fallbackClassName="ui-library-detail-layout__logo-fallback"
+        fallbackIcon="library"
+        fill
+        imageClassName="ui-library-detail-layout__logo"
+        imageUrl={logoImageUrl}
+        loading="eager"
+      />
+      <div className="ui-library-detail-layout__identity-text">
+        <div className="ui-library-detail-layout__title">{title}</div>
+        {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
+      </div>
+    </div>
+  );
+}

package/src/primitives/library-detail-layout/index.ts

@@ -0,0 +1,6 @@
+export * from './LibraryDetailLayout';
+export {
+  resolveLibraryDetailHeroCoverMedia,
+  type ResolveLibraryDetailHeroCoverMediaInput,
+  type ResolvedLibraryDetailHeroCoverMedia,
+} from './resolve-hero-cover-media.js';