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

package/src/layout/WorkbenchPropertyPanel.tsx

@@ -1,13 +1,14 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { Button } from '../primitives/Button';
-import type { ButtonProps } from '../primitives/Button';
-import { Checkbox } from '../primitives/Checkbox';
-import { Field } from '../primitives/Field';
-import type { FieldProps } from '../primitives/Field';
-import { NumberInput } from '../primitives/NumberInput';
-import { Select } from '../primitives/Select';
-import { TextInput } from '../primitives/TextInput';
-import type { ControlWidth } from '../primitives/TextInput';
+import { useId, useState, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { Button } from '../primitives/button';
+import type { ButtonProps } from '../primitives/button';
+import { Checkbox } from '../primitives/checkbox';
+import { Field } from '../primitives/field';
+import type { FieldProps } from '../primitives/field';
+import { NumberInput } from '../primitives/number-input';
+import { Select } from '../primitives/select';
+import { TextInput } from '../primitives/text-input';
+import type { ControlWidth } from '../primitives/text-input';
+import { cxCodicon } from '../utils/codicon';
 import { cx } from '../utils/cx';
 
 export type WorkbenchPropertyRowProps = FieldProps;
@@ -28,17 +29,22 @@ export interface WorkbenchPropertyTextRowProps extends Omit<WorkbenchPropertyRow
 export function WorkbenchPropertyTextRow({
   controlWidth = 'full',
   disabled,
+  htmlFor,
   onValueChange,
   placeholder,
   readOnly,
   value,
   ...props
 }: WorkbenchPropertyTextRowProps) {
+  const generatedId = useId();
+  const inputId = htmlFor ?? generatedId;
+
   return (
-    <WorkbenchPropertyRow {...props}>
+    <WorkbenchPropertyRow htmlFor={inputId} {...props}>
       <TextInput
         controlWidth={controlWidth}
         disabled={disabled}
+        id={inputId}
         placeholder={placeholder}
         readOnly={readOnly}
         value={value}
@@ -64,6 +70,7 @@ export interface WorkbenchPropertyNumberRowProps extends Omit<
 export function WorkbenchPropertyNumberRow({
   controlWidth = 'full',
   disabled,
+  htmlFor,
   max,
   min,
   onValueChange,
@@ -71,11 +78,15 @@ export function WorkbenchPropertyNumberRow({
   value,
   ...props
 }: WorkbenchPropertyNumberRowProps) {
+  const generatedId = useId();
+  const inputId = htmlFor ?? generatedId;
+
   return (
-    <WorkbenchPropertyRow {...props}>
+    <WorkbenchPropertyRow htmlFor={inputId} {...props}>
       <NumberInput
         controlWidth={controlWidth}
         disabled={disabled}
+        id={inputId}
         max={max}
         min={min}
         step={step}
@@ -179,16 +190,21 @@ export interface WorkbenchPropertySelectRowProps<TValue extends string = string>
 export function WorkbenchPropertySelectRow<TValue extends string = string>({
   controlWidth = 'full',
   disabled,
+  htmlFor,
   onValueChange,
   options,
   value,
   ...props
 }: WorkbenchPropertySelectRowProps<TValue>) {
+  const generatedId = useId();
+  const inputId = htmlFor ?? generatedId;
+
   return (
-    <WorkbenchPropertyRow {...props}>
+    <WorkbenchPropertyRow htmlFor={inputId} {...props}>
       <Select
         controlWidth={controlWidth}
         disabled={disabled}
+        id={inputId}
         value={value ?? options[0]?.value ?? ''}
         onValueChange={(next) => onValueChange(next as TValue)}
       >
@@ -287,6 +303,7 @@ export function WorkbenchPropertyCheckboxRow({
 }
 
 export interface WorkbenchPropertyPanelProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   empty?: boolean;
 }
 
@@ -313,12 +330,27 @@ export function WorkbenchSectionTitle({ className, ...props }: WorkbenchSectionT
   return <div className={cx('ui-workbench-section-title', className)} {...props} />;
 }
 
+export type WorkbenchPropertySectionLevel = 'category' | 'group';
+
 export interface WorkbenchPropertySectionProps extends Omit<
   ComponentPropsWithRef<'section'>,
   'title'
 > {
   actions?: ReactNode;
   bodyClassName?: string;
+  children?: ReactNode;
+  /** When true, the header becomes a disclosure control with a chevron. */
+  collapsible?: boolean;
+  /** Controlled collapsed state. Use with `onCollapsedChange`. */
+  collapsed?: boolean;
+  /** Uncontrolled initial collapsed state when `collapsed` is omitted. */
+  defaultCollapsed?: boolean;
+  /**
+   * Visual hierarchy for inspector categories vs nested groups.
+   * `category` is the default caps-style section; `group` is quieter.
+   */
+  level?: WorkbenchPropertySectionLevel;
+  onCollapsedChange?: (collapsed: boolean) => void;
   title?: ReactNode;
 }
 
@@ -327,23 +359,88 @@ export function WorkbenchPropertySection({
   bodyClassName,
   children,
   className,
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  id,
+  level = 'category',
+  onCollapsedChange,
   title,
   ...props
 }: WorkbenchPropertySectionProps) {
+  const generatedId = useId();
+  const sectionId = id ?? generatedId;
+  const headingId = `${sectionId}-heading`;
+  const contentId = `${sectionId}-content`;
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+  const resolvedCollapsed = collapsed ?? uncontrolledCollapsed;
+  const showHeader = Boolean(title || actions || collapsible);
+
+  const handleToggle = () => {
+    if (!collapsible) {
+      return;
+    }
+
+    const nextCollapsed = !resolvedCollapsed;
+    if (collapsed === undefined) {
+      setUncontrolledCollapsed(nextCollapsed);
+    }
+    onCollapsedChange?.(nextCollapsed);
+  };
+
   return (
-    <section className={cx('ui-workbench-property-section', className)} {...props}>
-      {title || actions ? (
+    <section
+      id={id}
+      aria-labelledby={title ? headingId : undefined}
+      className={cx(
+        'ui-workbench-property-section',
+        collapsible && 'ui-workbench-property-section--collapsible',
+        resolvedCollapsed && 'ui-workbench-property-section--collapsed',
+        className,
+      )}
+      data-level={level}
+      {...props}
+    >
+      {showHeader ? (
         <div className="ui-workbench-property-section__header">
-          {title ? <WorkbenchSectionTitle>{title}</WorkbenchSectionTitle> : null}
+          {collapsible && title ? (
+            <button
+              aria-controls={contentId}
+              aria-expanded={!resolvedCollapsed}
+              className="ui-workbench-property-section__toggle"
+              type="button"
+              onClick={handleToggle}
+            >
+              <i
+                aria-hidden="true"
+                className={cxCodicon(
+                  resolvedCollapsed ? 'chevron-right' : 'chevron-down',
+                  'ui-workbench-property-section__chevron',
+                )}
+              />
+              <span id={headingId} className="ui-workbench-section-title">
+                {title}
+              </span>
+            </button>
+          ) : title ? (
+            <WorkbenchSectionTitle id={headingId}>{title}</WorkbenchSectionTitle>
+          ) : null}
           {actions ? <div className="ui-workbench-property-section__actions">{actions}</div> : null}
         </div>
       ) : null}
-      <div className={cx('ui-workbench-property-section__body', bodyClassName)}>{children}</div>
+      <div
+        id={collapsible ? contentId : undefined}
+        className={cx('ui-workbench-property-section__body', bodyClassName)}
+        hidden={collapsible ? resolvedCollapsed : undefined}
+      >
+        {children}
+      </div>
     </section>
   );
 }
 
 export interface WorkbenchPropertyStackProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   gap?: 'xs' | 'sm' | 'md' | 'lg';
 }
 
@@ -376,6 +473,45 @@ export function WorkbenchPropertyGrid({
   );
 }
 
+export interface WorkbenchMetricGridItem {
+  id?: string | undefined;
+  label: ReactNode;
+  value: ReactNode;
+}
+
+export type WorkbenchMetricGridEntry = WorkbenchMetricGridItem | readonly [ReactNode, ReactNode];
+
+export interface WorkbenchMetricGridProps extends Omit<WorkbenchPropertyGridProps, 'children'> {
+  items: readonly WorkbenchMetricGridEntry[];
+}
+
+export function WorkbenchMetricGrid({
+  columns,
+  gap = 'md',
+  items,
+  ...props
+}: WorkbenchMetricGridProps) {
+  return (
+    <WorkbenchPropertyGrid columns={columns ?? (items.length > 3 ? 3 : 2)} gap={gap} {...props}>
+      {items.map((item, index) => {
+        const metric = isWorkbenchMetricGridTuple(item)
+          ? { key: index, label: item[0], value: item[1] }
+          : { key: item.id ?? index, label: item.label, value: item.value };
+
+        return (
+          <WorkbenchPropertyKeyValue key={metric.key} name={metric.label} value={metric.value} />
+        );
+      })}
+    </WorkbenchPropertyGrid>
+  );
+}
+
+function isWorkbenchMetricGridTuple(
+  item: WorkbenchMetricGridEntry,
+): item is readonly [ReactNode, ReactNode] {
+  return Array.isArray(item);
+}
+
 export interface WorkbenchPropertyInlineProps extends ComponentPropsWithRef<'div'> {
   justify?: 'start' | 'between';
 }

package/src/layout/WorkbenchPropertySearch.tsx

@@ -0,0 +1,51 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import { FilterBar, FilterBarRow } from './panel';
+import { ClearableTextInput } from '../primitives/clearable-text-input';
+import { cx } from '../utils/cx';
+
+export interface WorkbenchPropertySearchProps extends Omit<
+  ComponentPropsWithoutRef<'div'>,
+  'children' | 'onChange'
+> {
+  /** Accessible name for the search input. Defaults to "Search properties". */
+  'aria-label'?: string;
+  clearLabel?: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  value: string;
+}
+
+/**
+ * Declared-first inspector search chrome.
+ * Pair with `filterWorkbenchPropertyFields` — hosts own the field manifest.
+ */
+export function WorkbenchPropertySearch({
+  'aria-label': ariaLabel = 'Search properties',
+  className,
+  clearLabel = 'Clear',
+  onValueChange,
+  placeholder = 'Search properties',
+  value,
+  ...props
+}: WorkbenchPropertySearchProps) {
+  return (
+    <FilterBar
+      className={cx('ui-workbench-property-search', className)}
+      data-ui-workbench-property-search-bar="true"
+      {...props}
+    >
+      <FilterBarRow data-columns="search">
+        <ClearableTextInput
+          aria-label={ariaLabel}
+          clearLabel={clearLabel}
+          controlWidth="full"
+          data-ui-workbench-property-search="true"
+          placeholder={placeholder}
+          value={value}
+          onValueChange={onValueChange}
+        />
+      </FilterBarRow>
+    </FilterBar>
+  );
+}

package/src/layout/WorkbenchTree.tsx

@@ -1,12 +1,13 @@
 import { forwardRef } from 'react';
 import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
-import { IconButton } from '../primitives/IconButton';
-import type { IconButtonProps } from '../primitives/IconButton';
+import { IconButton } from '../primitives/icon-button';
+import type { IconButtonProps } from '../primitives/icon-button';
 import { cxCodicon } from '../utils/codicon';
 import { cx } from '../utils/cx';
 import { toLengthValue, workbenchTreeIndentOffset } from './layoutHelpers';
 
 export interface WorkbenchTreeProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   indentSize?: number | string;
   rowHeight?: number | string;
 }
@@ -38,6 +39,7 @@ export type WorkbenchTreeInteraction = 'default' | 'draggable' | 'dragging';
 
 export interface WorkbenchTreeItemProps extends ComponentPropsWithRef<'div'> {
   actions?: ReactNode;
+  children?: ReactNode;
   control?: ReactNode;
   depth?: number;
   icon?: ReactNode;
@@ -185,6 +187,7 @@ export function WorkbenchTreeActionButton({
 }
 
 export interface WorkbenchTreeDropLineProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   position: 'above' | 'below';
 }
 
@@ -204,6 +207,7 @@ export function WorkbenchTreeDropLine({
 }
 
 export interface WorkbenchTreeDropZoneProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   depth?: number;
   empty?: boolean;
   highlighted?: boolean;
@@ -235,6 +239,7 @@ export const WorkbenchTreeDropZone = forwardRef<HTMLDivElement, WorkbenchTreeDro
 );
 
 export interface WorkbenchTreeDragOverlayProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   rowHeight?: number | string;
 }
 
@@ -261,6 +266,7 @@ export function WorkbenchTreeDragOverlay({
 }
 
 export interface WorkbenchDragPreviewProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   maxWidth?: number | string;
   offset?: number | string;
   x: number | string;
@@ -293,14 +299,7 @@ export function WorkbenchDragPreview({
 }
 
 export type WorkbenchTemplateGlyphIcon =
-  | 'badge'
-  | 'color'
-  | 'flex'
-  | 'frame'
-  | 'grid'
-  | 'image'
-  | 'list'
-  | 'text';
+  'badge' | 'color' | 'flex' | 'frame' | 'grid' | 'image' | 'list' | 'text';
 
 export interface WorkbenchTemplateGlyphProps extends ComponentPropsWithRef<'span'> {
   accent: string;

package/src/layout/canvas/canvas-drag-ghost.css

@@ -0,0 +1,21 @@
+.ui-workbench-canvas-drag-ghost {
+  position: fixed;
+  left: var(--ui-workbench-canvas-drag-ghost-x, 0);
+  top: var(--ui-workbench-canvas-drag-ghost-y, 0);
+  z-index: var(--ui-workbench-canvas-drag-ghost-z-index, 2000);
+  width: var(--ui-workbench-canvas-drag-ghost-width, auto);
+  height: var(--ui-workbench-canvas-drag-ghost-height, auto);
+  overflow: hidden;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
+  opacity: var(--ui-workbench-canvas-drag-ghost-opacity, 0.82);
+  pointer-events: none;
+  transform: scale(var(--ui-workbench-canvas-drag-ghost-scale, 1.06));
+  transform-origin: center center;
+}
+
+.ui-workbench-canvas-drag-ghost__content {
+  width: var(--ui-workbench-canvas-drag-ghost-content-width, auto);
+  height: var(--ui-workbench-canvas-drag-ghost-content-height, auto);
+  transform: scale(var(--ui-workbench-canvas-drag-ghost-content-scale, 1));
+  transform-origin: 0 0;
+}

package/src/layout/canvas/canvas-drag-preview-frame.css

@@ -0,0 +1,15 @@
+.ui-workbench-canvas-drag-preview-frame {
+  box-sizing: border-box;
+  position: absolute;
+  left: var(--ui-workbench-canvas-drag-preview-frame-x, 0);
+  top: var(--ui-workbench-canvas-drag-preview-frame-y, 0);
+  z-index: var(--ui-workbench-canvas-drag-preview-frame-z-index, 1000);
+  width: var(--ui-workbench-canvas-drag-preview-frame-width, auto);
+  height: var(--ui-workbench-canvas-drag-preview-frame-height, auto);
+  overflow: hidden;
+  border: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
+  opacity: var(--ui-workbench-canvas-drag-preview-frame-opacity, 0.82);
+  pointer-events: none;
+  transform: var(--ui-workbench-canvas-drag-preview-frame-transform, none);
+  transform-origin: center center;
+}

package/src/layout/canvas/canvas-drop-indicator.css

@@ -0,0 +1,16 @@
+.ui-workbench-canvas-drop-indicator {
+  box-sizing: border-box;
+  position: absolute;
+  left: var(--ui-workbench-canvas-drop-indicator-x, 0);
+  top: var(--ui-workbench-canvas-drop-indicator-y, 0);
+  z-index: var(--ui-workbench-canvas-drop-indicator-z-index, 1);
+  width: var(--ui-workbench-canvas-drop-indicator-width, auto);
+  height: var(--ui-workbench-canvas-drop-indicator-height, auto);
+  background: color-mix(
+    in srgb,
+    var(--vscode-focusBorder, var(--color-focus-border)) 8%,
+    transparent
+  );
+  border: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
+  pointer-events: none;
+}

package/src/layout/canvas/canvas-frame-handle.css

@@ -0,0 +1,37 @@
+.ui-workbench-canvas-frame-handle {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  width: 100%;
+  height: 18px;
+  align-items: center;
+  padding: 0 8px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  background: color-mix(
+    in srgb,
+    var(--vscode-titleBar-activeBackground, var(--panel-bg, var(--color-bg))) 72%,
+    transparent
+  );
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+  cursor: grab;
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  touch-action: none;
+  user-select: none;
+}
+
+.ui-workbench-canvas-frame-handle:active {
+  cursor: grabbing;
+}
+
+.ui-workbench-canvas-frame-handle__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/layout/canvas/canvas-frame-surface.css

@@ -0,0 +1,24 @@
+.ui-workbench-canvas-frame-surface {
+  position: absolute;
+  box-sizing: border-box;
+  left: var(--ui-workbench-canvas-frame-left, auto);
+  top: var(--ui-workbench-canvas-frame-top, auto);
+  right: var(--ui-workbench-canvas-frame-right, auto);
+  bottom: var(--ui-workbench-canvas-frame-bottom, auto);
+  width: var(--ui-workbench-canvas-frame-width, auto);
+  height: var(--ui-workbench-canvas-frame-height, auto);
+  opacity: var(--ui-workbench-canvas-frame-opacity, 1);
+  transform: var(--ui-workbench-canvas-frame-transform, none);
+  background: color-mix(in srgb, var(--vscode-editor-background, var(--color-bg)) 42%, transparent);
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+
+.ui-workbench-canvas-frame-surface[data-selected='true'] {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: 2px;
+}
+
+.ui-workbench-canvas-frame-surface[data-transient='true'] {
+  transition: none;
+}

package/src/layout/canvas/canvas-guide-block.css

@@ -0,0 +1,17 @@
+.ui-workbench-canvas-guide-block {
+  position: absolute;
+  left: var(--ui-workbench-canvas-guide-block-x, 0);
+  top: var(--ui-workbench-canvas-guide-block-y, 0);
+  z-index: var(--ui-workbench-canvas-guide-block-z-index, 5);
+  width: var(--ui-workbench-canvas-guide-block-width, auto);
+  height: var(--ui-workbench-canvas-guide-block-height, auto);
+  pointer-events: none;
+}
+
+.ui-workbench-canvas-guide-block[data-tone='padding'] {
+  background: var(--ui-workbench-canvas-guide-padding, rgba(255, 82, 130, 0.18));
+}
+
+.ui-workbench-canvas-guide-block[data-tone='gap'] {
+  background: var(--ui-workbench-canvas-guide-gap, rgba(100, 180, 255, 0.18));
+}

package/src/layout/canvas/canvas-guide-layer.css

@@ -0,0 +1,6 @@
+.ui-workbench-canvas-guide-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 1001;
+  pointer-events: none;
+}

package/src/layout/canvas/canvas-guide-line.css

@@ -0,0 +1,22 @@
+.ui-workbench-canvas-guide-line {
+  position: absolute;
+  background: var(--vscode-focusBorder, var(--color-focus-border));
+}
+
+.ui-workbench-canvas-guide-line[data-source='object'] {
+  background: var(--ui-workbench-canvas-guide-object, #ef4444);
+}
+
+.ui-workbench-canvas-guide-line[data-axis='x'] {
+  left: var(--ui-workbench-canvas-guide-line-position, 0);
+  top: var(--ui-workbench-canvas-guide-line-start, 0);
+  width: 1px;
+  height: var(--ui-workbench-canvas-guide-line-length, 1px);
+}
+
+.ui-workbench-canvas-guide-line[data-axis='y'] {
+  left: var(--ui-workbench-canvas-guide-line-start, 0);
+  top: var(--ui-workbench-canvas-guide-line-position, 0);
+  width: var(--ui-workbench-canvas-guide-line-length, 1px);
+  height: 1px;
+}

package/src/layout/canvas/canvas-item-badge.css

@@ -0,0 +1,23 @@
+.ui-workbench-canvas-item-badge {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  z-index: 110;
+  padding: 2px 4px;
+  color: var(--vscode-badge-foreground, #fff);
+  background: var(--vscode-badge-background, var(--color-accent));
+  border-radius: 3px;
+  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.ui-workbench-canvas-item-badge[data-selected='false'] {
+  background: color-mix(in srgb, var(--vscode-badge-background, var(--color-accent)) 58%, #000);
+}
+
+.ui-workbench-canvas-item-badge[data-selected='true'] {
+  background: var(--ui-workbench-canvas-selection-color, #0d99ff);
+}

package/src/layout/canvas/canvas-item-frame.css

@@ -0,0 +1,54 @@
+.ui-workbench-canvas-item-frame {
+  box-sizing: border-box;
+  position: absolute;
+  left: var(--ui-workbench-canvas-item-x, 0);
+  top: var(--ui-workbench-canvas-item-y, 0);
+  z-index: var(--ui-workbench-canvas-item-z-index, 0);
+  width: var(--ui-workbench-canvas-item-width, auto);
+  height: var(--ui-workbench-canvas-item-height, auto);
+  overflow: var(--ui-workbench-canvas-item-overflow, visible);
+  opacity: var(--ui-workbench-canvas-item-opacity, 1);
+  transform: var(--ui-workbench-canvas-item-transform, none);
+  transform-origin: center center;
+  touch-action: var(--ui-workbench-canvas-item-touch-action, auto);
+  outline: none;
+  transition: all 0.15s ease;
+  cursor: var(--ui-workbench-canvas-item-cursor, auto);
+}
+
+.ui-workbench-canvas-item-frame[data-interactive='true'] {
+  cursor: var(--ui-workbench-canvas-item-cursor, grab);
+}
+
+.ui-workbench-canvas-item-frame[data-selected='true'] {
+  z-index: var(--ui-workbench-canvas-item-z-index, 100);
+  outline: 1px solid var(--ui-workbench-canvas-selection-color, #0d99ff);
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px var(--ui-workbench-canvas-selection-color, #0d99ff);
+}
+
+.ui-workbench-canvas-item-frame[data-focused='true'][data-selected='false'] {
+  z-index: var(--ui-workbench-canvas-item-z-index, 95);
+  outline: 1px solid var(--ui-workbench-canvas-selection-color, #0d99ff);
+  outline-offset: 0;
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--ui-workbench-canvas-selection-color, #0d99ff) 32%, transparent);
+}
+
+.ui-workbench-canvas-item-frame[data-focused='true'][data-selected='true'] {
+  box-shadow:
+    0 0 0 1px var(--ui-workbench-canvas-selection-color, #0d99ff),
+    0 0 0 3px
+      color-mix(in srgb, var(--ui-workbench-canvas-selection-color, #0d99ff) 32%, transparent);
+}
+
+.ui-workbench-canvas-item-frame[data-hovered='true'][data-selected='false'] {
+  z-index: var(--ui-workbench-canvas-item-z-index, 90);
+  outline: 1px dashed
+    color-mix(in srgb, var(--ui-workbench-canvas-selection-color, #0d99ff) 72%, transparent);
+  outline-offset: 0;
+}
+
+.ui-workbench-canvas-item-frame[data-transient='true'] {
+  transition: none;
+}

package/src/layout/canvas/canvas-pane-surface.css

@@ -0,0 +1,9 @@
+.ui-workbench-canvas-pane-surface {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--vscode-editor-background, var(--color-bg));
+}

package/src/layout/canvas/canvas-placeholder.css

@@ -0,0 +1,21 @@
+.ui-workbench-canvas-placeholder {
+  box-sizing: border-box;
+  display: flex;
+  width: var(--ui-workbench-canvas-placeholder-width, 100%);
+  height: var(--ui-workbench-canvas-placeholder-height, 100%);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 4px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  border: 1px dashed var(--vscode-panel-border, var(--color-border));
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+  text-align: center;
+}
+
+.ui-workbench-canvas-placeholder[data-positioned='true'] {
+  position: absolute;
+  left: var(--ui-workbench-canvas-placeholder-x, 0);
+  top: var(--ui-workbench-canvas-placeholder-y, 0);
+}

package/src/layout/canvas/canvas-resize-frame.css

@@ -0,0 +1,9 @@
+.ui-workbench-canvas-resize-frame {
+  position: absolute;
+  left: var(--ui-workbench-canvas-resize-frame-x, 0);
+  top: var(--ui-workbench-canvas-resize-frame-y, 0);
+  z-index: var(--ui-workbench-canvas-resize-frame-z-index, 2);
+  width: var(--ui-workbench-canvas-resize-frame-width, auto);
+  height: var(--ui-workbench-canvas-resize-frame-height, auto);
+  pointer-events: none;
+}