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

package/src/layout/fillScrollContract.ts

@@ -0,0 +1,49 @@
+/**
+ * Editor-in-pane fill/scroll ownership contract.
+ *
+ * Flex parents in an editor pane mark themselves as `fill` (clip, no document
+ * scroll). Only named `scroll` owners may overflow. Hosts keep product-specific
+ * owner id lists; the kit owns the role vocabulary, DOM marker, and helpers.
+ */
+
+export const WORKBENCH_FILL_SCROLL_ROLE_ATTR = 'data-ui-fill-scroll-role' as const;
+
+export type WorkbenchFillScrollRole = 'fill' | 'scroll';
+
+export type WorkbenchFillScrollRoleProps = {
+  readonly [WORKBENCH_FILL_SCROLL_ROLE_ATTR]: WorkbenchFillScrollRole;
+};
+
+export interface WorkbenchFillScrollOwnerRegistry {
+  readonly fillOwners: readonly string[];
+  readonly scrollOwners: readonly string[];
+}
+
+/** Spread onto host-owned elements that participate in a fill/scroll chain. */
+export function workbenchFillScrollRoleProps(
+  role: WorkbenchFillScrollRole,
+): WorkbenchFillScrollRoleProps {
+  return { [WORKBENCH_FILL_SCROLL_ROLE_ATTR]: role };
+}
+
+export function isWorkbenchScrollOwner(owner: string, scrollOwners: readonly string[]): boolean {
+  return scrollOwners.includes(owner);
+}
+
+export function isWorkbenchFillOwner(owner: string, fillOwners: readonly string[]): boolean {
+  return fillOwners.includes(owner);
+}
+
+/**
+ * Resolve fill vs scroll for a host-registered owner id.
+ * Scroll owners win when an id appears in both lists (hosts should avoid overlap).
+ */
+export function resolveWorkbenchFillScrollRole(
+  owner: string,
+  registry: WorkbenchFillScrollOwnerRegistry,
+): WorkbenchFillScrollRole {
+  if (isWorkbenchScrollOwner(owner, registry.scrollOwners)) {
+    return 'scroll';
+  }
+  return 'fill';
+}

package/src/layout/fullscreen/fullscreen-backdrop.css

@@ -0,0 +1,31 @@
+.ui-workbench-fullscreen-backdrop {
+  position: absolute;
+  inset: 0;
+}
+
+.ui-workbench-fullscreen-backdrop__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.46;
+  filter: saturate(0.92);
+}
+
+.ui-workbench-fullscreen-backdrop__scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 94%, transparent),
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 56%, transparent) 48%,
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 90%, transparent)
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 35%, transparent),
+      var(--vscode-editor-background, #111312) 82%
+    );
+}

package/src/layout/fullscreen/fullscreen-button.css

@@ -0,0 +1,44 @@
+.ui-workbench-fullscreen-button {
+  box-sizing: border-box;
+  min-width: 84px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 0 12px;
+  color: #f8fafc;
+  background: rgba(28, 29, 25, 0.68);
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.ui-workbench-fullscreen-button:hover,
+.ui-workbench-fullscreen-button:focus-visible {
+  background: rgba(51, 55, 48, 0.74);
+}
+
+.ui-workbench-fullscreen-button:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: 2px;
+}
+
+.ui-workbench-fullscreen-button[data-prominent='true'] {
+  min-width: 148px;
+  height: 46px;
+  gap: 9px;
+  padding: 0 20px;
+  color: #052e16;
+  background: #22c55e;
+  border-color: rgba(255, 255, 255, 0.2);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.ui-workbench-fullscreen-button[data-prominent='true']:hover,
+.ui-workbench-fullscreen-button[data-prominent='true']:focus-visible {
+  background: #4ade80;
+}

package/src/layout/fullscreen/fullscreen-carousel.css

@@ -0,0 +1,20 @@
+.ui-workbench-fullscreen-carousel {
+  display: grid;
+  flex: 0 0 auto;
+  align-items: center;
+  grid-template-columns: 44px minmax(0, 1fr) 44px;
+  gap: 12px;
+  min-height: 234px;
+  padding: 8px clamp(12px, 4vw, 48px) 30px;
+}
+
+.ui-workbench-fullscreen-carousel__viewport {
+  display: flex;
+  min-width: 0;
+  align-items: stretch;
+  gap: 14px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 12px 4px;
+  scroll-snap-type: x proximity;
+}

package/src/layout/fullscreen/fullscreen-content.css

@@ -0,0 +1,8 @@
+.ui-workbench-fullscreen-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+}

package/src/layout/fullscreen/fullscreen-empty.css

@@ -0,0 +1,16 @@
+.ui-workbench-fullscreen-empty {
+  max-width: 520px;
+}
+
+.ui-workbench-fullscreen-empty__title {
+  margin: 0;
+  color: #f8fafc;
+  font-size: 38px;
+  line-height: 1.08;
+}
+
+.ui-workbench-fullscreen-empty__text {
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 14px;
+  line-height: 1.6;
+}

package/src/layout/fullscreen/fullscreen-header.css

@@ -0,0 +1,77 @@
+.ui-workbench-fullscreen-header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 68px;
+  padding: 14px clamp(18px, 5vw, 56px);
+}
+
+.ui-workbench-fullscreen-header__brand {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ui-workbench-fullscreen-header__title {
+  overflow: hidden;
+  color: #f8fafc;
+  font-size: 20px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-fullscreen-header__subtitle {
+  min-width: 0;
+  margin-top: 3px;
+  overflow: hidden;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-fullscreen-header__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+@media (max-width: 760px) {
+  .ui-workbench-fullscreen-header {
+    padding-inline: 18px;
+  }
+
+  .ui-workbench-fullscreen-header__actions {
+    gap: 8px;
+  }
+
+  .ui-workbench-fullscreen-button {
+    min-width: 36px;
+  }
+
+  .ui-workbench-fullscreen-hero {
+    padding-inline: 18px;
+  }
+
+  .ui-workbench-fullscreen-hero__title {
+    font-size: 38px;
+  }
+
+  .ui-workbench-fullscreen-hero__action-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .ui-workbench-fullscreen-carousel {
+    grid-template-columns: 36px minmax(0, 1fr) 36px;
+  }
+
+  .ui-workbench-fullscreen-nav-button {
+    min-width: 36px;
+  }
+
+  .ui-workbench-fullscreen-option {
+    flex-basis: 166px;
+  }
+}

package/src/layout/fullscreen/fullscreen-hero.css

@@ -0,0 +1,41 @@
+.ui-workbench-fullscreen-hero {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 280px;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px clamp(18px, 7vw, 86px) 18px;
+}
+
+.ui-workbench-fullscreen-hero__meta {
+  margin-bottom: 10px;
+  color: rgba(226, 232, 240, 0.78);
+  font-size: 13px;
+  letter-spacing: 0;
+}
+
+.ui-workbench-fullscreen-hero__title {
+  max-width: 920px;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: #f8fafc;
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 1.05;
+}
+
+.ui-workbench-fullscreen-hero__action-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 26px;
+}
+
+.ui-workbench-fullscreen-hero__status {
+  min-width: 0;
+  overflow: hidden;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/layout/fullscreen/fullscreen-nav-button.css

@@ -0,0 +1,29 @@
+.ui-workbench-fullscreen-nav-button {
+  box-sizing: border-box;
+  min-width: 44px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  padding: 0;
+  color: #f8fafc;
+  background: rgba(28, 29, 25, 0.68);
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.ui-workbench-fullscreen-nav-button:hover,
+.ui-workbench-fullscreen-nav-button:focus-visible {
+  background: rgba(51, 55, 48, 0.74);
+}
+
+.ui-workbench-fullscreen-nav-button:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: 2px;
+}
+
+.ui-workbench-fullscreen-nav-button .codicon {
+  font-size: 20px;
+}

package/src/layout/fullscreen/fullscreen-option.css

@@ -0,0 +1,83 @@
+.ui-workbench-fullscreen-option {
+  box-sizing: border-box;
+  display: grid;
+  flex: 0 0 206px;
+  min-height: 178px;
+  grid-template-rows: 118px minmax(58px, auto);
+  overflow: hidden;
+  color: #f8fafc;
+  background: rgba(28, 29, 25, 0.68);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 6px;
+  outline: none;
+  scroll-snap-align: center;
+  transition:
+    transform 140ms ease,
+    border-color 140ms ease,
+    background 140ms ease;
+  transform: scale(1);
+  transform-origin: center bottom;
+  cursor: pointer;
+}
+
+.ui-workbench-fullscreen-option[data-selected='true'] {
+  background: rgba(248, 250, 252, 0.14);
+  border: 2px solid rgba(34, 197, 94, 0.95);
+  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.36);
+  transform: scale(1.045);
+}
+
+.ui-workbench-fullscreen-option:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: 2px;
+}
+
+.ui-workbench-fullscreen-option__artwork {
+  display: flex;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(135deg, #26352f, #22c55e);
+}
+
+.ui-workbench-fullscreen-option__artwork[data-tone='accent'] {
+  background: linear-gradient(135deg, #1b2838, #3b82f6);
+}
+
+.ui-workbench-fullscreen-option__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-workbench-fullscreen-option__placeholder {
+  color: rgba(248, 250, 252, 0.68);
+  font-size: 30px;
+}
+
+.ui-workbench-fullscreen-option__body {
+  min-width: 0;
+  padding: 10px 11px 11px;
+}
+
+.ui-workbench-fullscreen-option__title {
+  min-height: 34px;
+  overflow: hidden;
+  color: #f8fafc;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+}
+
+.ui-workbench-fullscreen-option__meta {
+  min-width: 0;
+  margin-top: 4px;
+  overflow: hidden;
+  color: rgba(226, 232, 240, 0.66);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/layout/fullscreen/fullscreen-pill-row.css

@@ -0,0 +1,6 @@
+.ui-workbench-fullscreen-pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 20px;
+}

package/src/layout/fullscreen/fullscreen-pill.css

@@ -0,0 +1,10 @@
+.ui-workbench-fullscreen-pill {
+  min-height: 24px;
+  padding: 0 9px;
+  color: rgba(248, 250, 252, 0.88);
+  background: rgba(28, 29, 25, 0.68);
+  border: 1px solid rgba(148, 163, 184, 0.32);
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 24px;
+}

package/src/layout/fullscreen/fullscreen-root.css

@@ -0,0 +1,11 @@
+.ui-workbench-fullscreen-root {
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--vscode-foreground, #f8fafc);
+  background: var(--vscode-editor-background, #111312);
+  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+  outline: none;
+}

package/src/layout/fullscreen/index.css

@@ -0,0 +1,13 @@
+/* layout/fullscreen feature styles */
+@import './fullscreen-backdrop.css';
+@import './fullscreen-button.css';
+@import './fullscreen-carousel.css';
+@import './fullscreen-content.css';
+@import './fullscreen-empty.css';
+@import './fullscreen-header.css';
+@import './fullscreen-hero.css';
+@import './fullscreen-nav-button.css';
+@import './fullscreen-option.css';
+@import './fullscreen-pill-row.css';
+@import './fullscreen-pill.css';
+@import './fullscreen-root.css';

package/src/layout/index.ts

@@ -0,0 +1,165 @@
+export {
+  FilterBar,
+  FilterBarActiveChips,
+  FilterBarRow,
+  FilterChip,
+  HelpText,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PreviewPane,
+  PreviewPaneContent,
+  PreviewPaneDetails,
+  PreviewPaneText,
+  PreviewPaneTitle,
+  PreviewPaneViewport,
+} from './panel';
+export type {
+  FilterBarActiveChipsProps,
+  FilterBarProps,
+  FilterBarRowProps,
+  FilterChipProps,
+  HelpTextProps,
+  PanelBodyProps,
+  PanelFooterProps,
+  PanelHeaderProps,
+  PanelProps,
+  PreviewPaneContentProps,
+  PreviewPaneDetailsProps,
+  PreviewPaneProps,
+  PreviewPaneTextProps,
+  PreviewPaneTitleProps,
+  PreviewPaneViewportProps,
+} from './panel';
+export { WorkbenchLabeledPane } from './panel';
+export {
+  WorkbenchAuthoringShell,
+  WorkbenchPlainTextSource,
+  WorkbenchSurfaceMeta,
+  WorkbenchSurfaceToolbar,
+} from './panel';
+export { WorkbenchSidebarStack } from './panel';
+export type {
+  WorkbenchAuthoringShellProps,
+  WorkbenchLabeledPaneChrome,
+  WorkbenchLabeledPaneProps,
+  WorkbenchLabeledPaneTone,
+  WorkbenchPlainTextSourceProps,
+  WorkbenchSurfaceMetaProps,
+  WorkbenchSurfaceToolbarProps,
+  WorkbenchSidebarStackProps,
+} from './panel';
+export {
+  SideBarHeaderControl,
+  SideBarList,
+  SideBarListItem,
+  SideBarRow,
+  SideBarScrollSpacer,
+  SideBarTree,
+  SideBarViewFrame,
+  SideBarViewTabStrip,
+  SideBarViewTitleMenu,
+  SidebarActionIconBar,
+  SidebarSlotChrome,
+  SidebarToolbar,
+  WorkbenchActionList,
+  WorkbenchActionListItem,
+  WorkbenchActionSidebar,
+  WorkbenchSidebarSection,
+  WorkbenchSidebarSectionHeader,
+  WorkbenchSidebarSectionStack,
+  flattenVisibleSideBarTreeItems,
+  isSideBarTreeBranch,
+  selectSideBarTreeIds,
+  sideBarTreeDepthStyle,
+  toggleSideBarTreeId,
+  useSidebarSectionBaseDepth,
+} from './sidebar';
+export type {
+  SideBarHeaderControlProps,
+  SideBarListItemProps,
+  SideBarListProps,
+  SideBarRowProps,
+  SideBarScrollSpacerProps,
+  SideBarTreeItem,
+  SideBarTreeProps,
+  SideBarTreeSelectionMode,
+  SideBarTreeVisibleNode,
+  SideBarViewFrameProps,
+  SideBarViewTabDescriptor,
+  SideBarViewTabStripProps,
+  SideBarViewTitleMenuProps,
+  SidebarActionIconBarProps,
+  SidebarActionIconDescriptor,
+  SidebarSlotChromeProps,
+  SidebarToolbarProps,
+  WorkbenchActionItem,
+  WorkbenchActionListItemProps,
+  WorkbenchActionListProps,
+  WorkbenchActionSidebarItem,
+  WorkbenchActionSidebarProps,
+  WorkbenchActionStatus,
+  WorkbenchSidebarSectionHeaderProps,
+  WorkbenchSidebarSectionProps,
+  WorkbenchSidebarSectionStackItem,
+  WorkbenchSidebarSectionStackProps,
+} from './sidebar';
+export {
+  WorkbenchColumn,
+  WorkbenchEditorFrame,
+  WorkbenchFill,
+  WorkbenchFillChain,
+  WorkbenchScrollRegion,
+} from './WorkbenchLayoutBase';
+export type {
+  WorkbenchColumnProps,
+  WorkbenchEditorFrameProps,
+  WorkbenchFillChainProps,
+  WorkbenchFillProps,
+  WorkbenchScrollRegionProps,
+} from './WorkbenchLayoutBase';
+export {
+  WORKBENCH_FILL_SCROLL_ROLE_ATTR,
+  isWorkbenchFillOwner,
+  isWorkbenchScrollOwner,
+  resolveWorkbenchFillScrollRole,
+  workbenchFillScrollRoleProps,
+} from './fillScrollContract';
+export type {
+  WorkbenchFillScrollOwnerRegistry,
+  WorkbenchFillScrollRole,
+  WorkbenchFillScrollRoleProps,
+} from './fillScrollContract';
+export { WorkbenchPropertyInline } from './WorkbenchPropertyPanel';
+export type { WorkbenchPropertyInlineProps } from './WorkbenchPropertyPanel';
+export { WorkbenchPropertyOverrideLabel } from './WorkbenchPropertyOverrideLabel';
+export type {
+  WorkbenchPropertyOverrideLabelProps,
+  WorkbenchPropertyOverrideResetAppearance,
+} from './WorkbenchPropertyOverrideLabel';
+export { WorkbenchPropertySearch } from './WorkbenchPropertySearch';
+export type { WorkbenchPropertySearchProps } from './WorkbenchPropertySearch';
+export {
+  filterWorkbenchPropertyFields,
+  isWorkbenchPropertySearchActive,
+} from './propertyFieldFilter';
+export type {
+  WorkbenchPropertyFieldFilterInput,
+  WorkbenchPropertyFieldFilterResult,
+  WorkbenchPropertyFieldManifestEntry,
+} from './propertyFieldFilter';
+export { WorkbenchMediaPreviewViewport } from './WorkbenchMediaPreviewViewport';
+export type { WorkbenchMediaPreviewViewportProps } from './WorkbenchMediaPreviewViewport';
+export {
+  clampPreviewViewportZoom,
+  computePreviewViewportFitScale,
+  computeZoomPanTowardPoint,
+  usePreviewViewport,
+} from './usePreviewViewport';
+export type {
+  PreviewViewportPoint,
+  PreviewViewportSize,
+  UsePreviewViewportOptions,
+  UsePreviewViewportResult,
+} from './usePreviewViewport';

package/src/layout/layout-base/banner.css

@@ -0,0 +1,32 @@
+.ui-workbench-banner {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 32px;
+  padding: 4px 8px 4px 10px;
+  color: var(--vscode-notifications-foreground, var(--color-text));
+  background: var(--vscode-notifications-background, var(--color-surface));
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-workbench-banner--warning {
+  color: var(--vscode-inputValidation-warningForeground, var(--vscode-foreground));
+  background: var(--vscode-inputValidation-warningBackground, #352a05);
+  border-bottom-color: var(--vscode-inputValidation-warningBorder, #b89500);
+}
+
+.ui-workbench-banner__icon {
+  flex: 0 0 auto;
+  color: var(--vscode-editorWarning-foreground, #cca700);
+}
+
+.ui-workbench-banner__message {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/layout/layout-base/center.css

@@ -0,0 +1,7 @@
+.ui-workbench-center {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}

package/src/layout/layout-base/column.css

@@ -0,0 +1,7 @@
+.ui-workbench-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}

package/src/layout/layout-base/divider.css

@@ -0,0 +1,5 @@
+.ui-workbench-divider {
+  height: 1px;
+  margin: 6px 0;
+  background: var(--vscode-panel-border, var(--color-border));
+}

package/src/layout/layout-base/empty.css

@@ -0,0 +1,12 @@
+.ui-workbench-empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  padding: 16px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: var(--font-size-sm);
+  text-align: center;
+}