@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/layout/WorkbenchPropertyPanel.tsx

@@ -1,633 +1,633 @@
-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;
-
-export function WorkbenchPropertyRow({ className, ...props }: WorkbenchPropertyRowProps) {
-  return <Field className={cx('ui-workbench-property-row', className)} {...props} />;
-}
-
-export interface WorkbenchPropertyTextRowProps extends Omit<WorkbenchPropertyRowProps, 'children'> {
-  controlWidth?: ControlWidth;
-  disabled?: boolean | undefined;
-  onValueChange?: (value: string) => void;
-  placeholder?: string | undefined;
-  readOnly?: boolean | undefined;
-  value: string;
-}
-
-export function WorkbenchPropertyTextRow({
-  controlWidth = 'full',
-  disabled,
-  htmlFor,
-  onValueChange,
-  placeholder,
-  readOnly,
-  value,
-  ...props
-}: WorkbenchPropertyTextRowProps) {
-  const generatedId = useId();
-  const inputId = htmlFor ?? generatedId;
-
-  return (
-    <WorkbenchPropertyRow htmlFor={inputId} {...props}>
-      <TextInput
-        controlWidth={controlWidth}
-        disabled={disabled}
-        id={inputId}
-        placeholder={placeholder}
-        readOnly={readOnly}
-        value={value}
-        onValueChange={onValueChange}
-      />
-    </WorkbenchPropertyRow>
-  );
-}
-
-export interface WorkbenchPropertyNumberRowProps extends Omit<
-  WorkbenchPropertyRowProps,
-  'children'
-> {
-  controlWidth?: ControlWidth;
-  disabled?: boolean | undefined;
-  max?: number | undefined;
-  min?: number | undefined;
-  onValueChange: (value: number) => void;
-  step?: number | string | undefined;
-  value?: number | undefined;
-}
-
-export function WorkbenchPropertyNumberRow({
-  controlWidth = 'full',
-  disabled,
-  htmlFor,
-  max,
-  min,
-  onValueChange,
-  step,
-  value,
-  ...props
-}: WorkbenchPropertyNumberRowProps) {
-  const generatedId = useId();
-  const inputId = htmlFor ?? generatedId;
-
-  return (
-    <WorkbenchPropertyRow htmlFor={inputId} {...props}>
-      <NumberInput
-        controlWidth={controlWidth}
-        disabled={disabled}
-        id={inputId}
-        max={max}
-        min={min}
-        step={step}
-        value={value}
-        onValueChange={onValueChange}
-      />
-    </WorkbenchPropertyRow>
-  );
-}
-
-export interface WorkbenchPropertyRangeRowProps extends Omit<
-  WorkbenchPropertyRowProps,
-  'children'
-> {
-  controlWidth?: ControlWidth;
-  disabled?: boolean | undefined;
-  max?: number | undefined;
-  min?: number | undefined;
-  onValueChange: (value: number) => void;
-  step?: number | string | undefined;
-  value?: number | undefined;
-}
-
-export function WorkbenchPropertyRangeRow({
-  controlWidth = 'full',
-  disabled,
-  max,
-  min,
-  onValueChange,
-  step,
-  value,
-  ...props
-}: WorkbenchPropertyRangeRowProps) {
-  return (
-    <WorkbenchPropertyRow {...props}>
-      <TextInput
-        controlWidth={controlWidth}
-        disabled={disabled}
-        max={max}
-        min={min}
-        step={step}
-        type="range"
-        value={value}
-        onValueChange={(next) => {
-          const parsed = Number.parseFloat(next);
-          if (!Number.isNaN(parsed)) {
-            onValueChange(parsed);
-          }
-        }}
-      />
-    </WorkbenchPropertyRow>
-  );
-}
-
-export interface WorkbenchPropertyColorRowProps extends Omit<
-  WorkbenchPropertyRowProps,
-  'children'
-> {
-  disabled?: boolean | undefined;
-  fallbackValue?: string;
-  onValueChange: (value: string) => void;
-  value?: string | undefined;
-}
-
-export function WorkbenchPropertyColorRow({
-  disabled,
-  fallbackValue,
-  onValueChange,
-  value,
-  ...props
-}: WorkbenchPropertyColorRowProps) {
-  return (
-    <WorkbenchPropertyRow {...props}>
-      <WorkbenchColorInput
-        disabled={disabled}
-        fallbackValue={fallbackValue ?? '#000000'}
-        value={value}
-        onValueChange={onValueChange}
-      />
-    </WorkbenchPropertyRow>
-  );
-}
-
-export interface WorkbenchPropertySelectOption<TValue extends string = string> {
-  disabled?: boolean | undefined;
-  label: ReactNode;
-  value: TValue;
-}
-
-export interface WorkbenchPropertySelectRowProps<TValue extends string = string> extends Omit<
-  WorkbenchPropertyRowProps,
-  'children'
-> {
-  controlWidth?: ControlWidth;
-  disabled?: boolean | undefined;
-  onValueChange: (value: TValue) => void;
-  options: readonly WorkbenchPropertySelectOption<TValue>[];
-  value?: TValue | undefined;
-}
-
-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 htmlFor={inputId} {...props}>
-      <Select
-        controlWidth={controlWidth}
-        disabled={disabled}
-        id={inputId}
-        value={value ?? options[0]?.value ?? ''}
-        onValueChange={(next) => onValueChange(next as TValue)}
-      >
-        {options.map((option) => (
-          <option key={option.value} disabled={option.disabled} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </Select>
-    </WorkbenchPropertyRow>
-  );
-}
-
-export interface WorkbenchPropertySelectActionRowProps<TValue extends string = string> extends Omit<
-  WorkbenchPropertyRowProps,
-  'children'
-> {
-  actionDisabled?: boolean | undefined;
-  actionLabel: ReactNode;
-  actionTitle?: string | undefined;
-  controlWidth?: ControlWidth;
-  disabled?: boolean | undefined;
-  onAction: () => void;
-  onValueChange: (value: TValue) => void;
-  options: readonly WorkbenchPropertySelectOption<TValue>[];
-  value?: TValue | undefined;
-}
-
-export function WorkbenchPropertySelectActionRow<TValue extends string = string>({
-  actionDisabled,
-  actionLabel,
-  actionTitle,
-  controlWidth = 'full',
-  disabled,
-  onAction,
-  onValueChange,
-  options,
-  value,
-  ...props
-}: WorkbenchPropertySelectActionRowProps<TValue>) {
-  return (
-    <WorkbenchPropertyRow {...props}>
-      <WorkbenchPropertyInline>
-        <Select
-          controlWidth={controlWidth}
-          disabled={disabled}
-          value={value ?? options[0]?.value ?? ''}
-          onValueChange={(next) => onValueChange(next as TValue)}
-        >
-          {options.map((option) => (
-            <option key={option.value} disabled={option.disabled} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </Select>
-        <WorkbenchPropertyToggleButton
-          disabled={actionDisabled}
-          title={actionTitle}
-          type="button"
-          onClick={onAction}
-        >
-          {actionLabel}
-        </WorkbenchPropertyToggleButton>
-      </WorkbenchPropertyInline>
-    </WorkbenchPropertyRow>
-  );
-}
-
-export interface WorkbenchPropertyCheckboxRowProps extends Omit<
-  WorkbenchPropertyRowProps,
-  'children'
-> {
-  checked?: boolean | undefined;
-  checkboxLabel?: ReactNode;
-  disabled?: boolean | undefined;
-  onCheckedChange: (checked: boolean) => void;
-}
-
-export function WorkbenchPropertyCheckboxRow({
-  checked,
-  checkboxLabel,
-  disabled,
-  onCheckedChange,
-  ...props
-}: WorkbenchPropertyCheckboxRowProps) {
-  return (
-    <WorkbenchPropertyRow {...props}>
-      <Checkbox
-        checked={Boolean(checked)}
-        disabled={disabled}
-        label={checkboxLabel}
-        onCheckedChange={onCheckedChange}
-      />
-    </WorkbenchPropertyRow>
-  );
-}
-
-export interface WorkbenchPropertyPanelProps extends ComponentPropsWithRef<'div'> {
-  children?: ReactNode;
-  empty?: boolean;
-}
-
-export function WorkbenchPropertyPanel({
-  className,
-  empty = false,
-  ...props
-}: WorkbenchPropertyPanelProps) {
-  return (
-    <div
-      className={cx(
-        'ui-workbench-property-panel',
-        empty && 'ui-workbench-property-panel--empty',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export type WorkbenchSectionTitleProps = ComponentPropsWithRef<'div'>;
-
-export function WorkbenchSectionTitle({ className, ...props }: WorkbenchSectionTitleProps) {
-  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;
-}
-
-export function WorkbenchPropertySection({
-  actions,
-  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
-      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">
-          {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
-        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';
-}
-
-export function WorkbenchPropertyStack({
-  className,
-  gap = 'md',
-  ...props
-}: WorkbenchPropertyStackProps) {
-  return <div className={cx('ui-workbench-property-stack', className)} data-gap={gap} {...props} />;
-}
-
-export interface WorkbenchPropertyGridProps extends ComponentPropsWithRef<'div'> {
-  columns?: 2 | 3;
-  gap?: 'xs' | 'sm' | 'md';
-}
-
-export function WorkbenchPropertyGrid({
-  className,
-  columns = 2,
-  gap = 'sm',
-  ...props
-}: WorkbenchPropertyGridProps) {
-  return (
-    <div
-      className={cx('ui-workbench-property-grid', className)}
-      data-columns={columns}
-      data-gap={gap}
-      {...props}
-    />
-  );
-}
-
-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';
-}
-
-export function WorkbenchPropertyInline({
-  className,
-  justify = 'start',
-  ...props
-}: WorkbenchPropertyInlineProps) {
-  return (
-    <div
-      className={cx('ui-workbench-property-inline', className)}
-      data-justify={justify}
-      {...props}
-    />
-  );
-}
-
-export type WorkbenchPropertyHintProps = ComponentPropsWithRef<'span'>;
-
-export function WorkbenchPropertyHint({ className, ...props }: WorkbenchPropertyHintProps) {
-  return <span className={cx('ui-workbench-property-hint', className)} {...props} />;
-}
-
-export type WorkbenchPropertyCardProps = ComponentPropsWithRef<'div'>;
-
-export function WorkbenchPropertyCard({ className, ...props }: WorkbenchPropertyCardProps) {
-  return <div className={cx('ui-workbench-property-card', className)} {...props} />;
-}
-
-export interface WorkbenchPropertyKeyValueProps extends ComponentPropsWithRef<'div'> {
-  name: ReactNode;
-  value: ReactNode;
-}
-
-export function WorkbenchPropertyKeyValue({
-  className,
-  name,
-  value,
-  ...props
-}: WorkbenchPropertyKeyValueProps) {
-  return (
-    <div className={cx('ui-workbench-property-key-value', className)} {...props}>
-      <span className="ui-workbench-property-key-value__name">{name}</span>
-      <span className="ui-workbench-property-key-value__value">{value}</span>
-    </div>
-  );
-}
-
-export interface WorkbenchPropertyToggleButtonProps extends ButtonProps {
-  active?: boolean;
-}
-
-export function WorkbenchPropertyToggleButton({
-  active = false,
-  className,
-  compact = true,
-  ...props
-}: WorkbenchPropertyToggleButtonProps) {
-  return (
-    <Button
-      className={cx('ui-workbench-property-toggle', className)}
-      compact={compact}
-      data-active={active ? 'true' : 'false'}
-      {...props}
-    />
-  );
-}
-
-export type WorkbenchColorRowProps = ComponentPropsWithRef<'div'>;
-
-export function WorkbenchColorRow({ className, ...props }: WorkbenchColorRowProps) {
-  return <div className={cx('ui-workbench-color-row', className)} {...props} />;
-}
-
-export interface WorkbenchColorInputProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onChange'
-> {
-  disabled?: boolean | undefined;
-  fallbackValue?: string;
-  onValueChange: (value: string) => void;
-  value?: string | undefined;
-}
-
-export function WorkbenchColorInput({
-  disabled = false,
-  fallbackValue = '#000000',
-  onValueChange,
-  value,
-  ...props
-}: WorkbenchColorInputProps) {
-  const currentValue = value ?? fallbackValue;
-
-  return (
-    <WorkbenchColorRow {...props}>
-      <TextInput
-        className="ui-workbench-color-input"
-        disabled={disabled}
-        type="color"
-        value={currentValue}
-        onChange={(event) => onValueChange(event.target.value)}
-      />
-      <TextInput
-        controlWidth="full"
-        disabled={disabled}
-        type="text"
-        value={currentValue}
-        onChange={(event) => onValueChange(event.target.value)}
-      />
-    </WorkbenchColorRow>
-  );
-}
-
-export type WorkbenchParseErrorProps = ComponentPropsWithRef<'div'>;
-
-export function WorkbenchParseError({ className, ...props }: WorkbenchParseErrorProps) {
-  return <div className={cx('ui-workbench-parse-error', className)} {...props} />;
-}
+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;
+
+export function WorkbenchPropertyRow({ className, ...props }: WorkbenchPropertyRowProps) {
+  return <Field className={cx('ui-workbench-property-row', className)} {...props} />;
+}
+
+export interface WorkbenchPropertyTextRowProps extends Omit<WorkbenchPropertyRowProps, 'children'> {
+  controlWidth?: ControlWidth;
+  disabled?: boolean | undefined;
+  onValueChange?: (value: string) => void;
+  placeholder?: string | undefined;
+  readOnly?: boolean | undefined;
+  value: string;
+}
+
+export function WorkbenchPropertyTextRow({
+  controlWidth = 'full',
+  disabled,
+  htmlFor,
+  onValueChange,
+  placeholder,
+  readOnly,
+  value,
+  ...props
+}: WorkbenchPropertyTextRowProps) {
+  const generatedId = useId();
+  const inputId = htmlFor ?? generatedId;
+
+  return (
+    <WorkbenchPropertyRow htmlFor={inputId} {...props}>
+      <TextInput
+        controlWidth={controlWidth}
+        disabled={disabled}
+        id={inputId}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        value={value}
+        onValueChange={onValueChange}
+      />
+    </WorkbenchPropertyRow>
+  );
+}
+
+export interface WorkbenchPropertyNumberRowProps extends Omit<
+  WorkbenchPropertyRowProps,
+  'children'
+> {
+  controlWidth?: ControlWidth;
+  disabled?: boolean | undefined;
+  max?: number | undefined;
+  min?: number | undefined;
+  onValueChange: (value: number) => void;
+  step?: number | string | undefined;
+  value?: number | undefined;
+}
+
+export function WorkbenchPropertyNumberRow({
+  controlWidth = 'full',
+  disabled,
+  htmlFor,
+  max,
+  min,
+  onValueChange,
+  step,
+  value,
+  ...props
+}: WorkbenchPropertyNumberRowProps) {
+  const generatedId = useId();
+  const inputId = htmlFor ?? generatedId;
+
+  return (
+    <WorkbenchPropertyRow htmlFor={inputId} {...props}>
+      <NumberInput
+        controlWidth={controlWidth}
+        disabled={disabled}
+        id={inputId}
+        max={max}
+        min={min}
+        step={step}
+        value={value}
+        onValueChange={onValueChange}
+      />
+    </WorkbenchPropertyRow>
+  );
+}
+
+export interface WorkbenchPropertyRangeRowProps extends Omit<
+  WorkbenchPropertyRowProps,
+  'children'
+> {
+  controlWidth?: ControlWidth;
+  disabled?: boolean | undefined;
+  max?: number | undefined;
+  min?: number | undefined;
+  onValueChange: (value: number) => void;
+  step?: number | string | undefined;
+  value?: number | undefined;
+}
+
+export function WorkbenchPropertyRangeRow({
+  controlWidth = 'full',
+  disabled,
+  max,
+  min,
+  onValueChange,
+  step,
+  value,
+  ...props
+}: WorkbenchPropertyRangeRowProps) {
+  return (
+    <WorkbenchPropertyRow {...props}>
+      <TextInput
+        controlWidth={controlWidth}
+        disabled={disabled}
+        max={max}
+        min={min}
+        step={step}
+        type="range"
+        value={value}
+        onValueChange={(next) => {
+          const parsed = Number.parseFloat(next);
+          if (!Number.isNaN(parsed)) {
+            onValueChange(parsed);
+          }
+        }}
+      />
+    </WorkbenchPropertyRow>
+  );
+}
+
+export interface WorkbenchPropertyColorRowProps extends Omit<
+  WorkbenchPropertyRowProps,
+  'children'
+> {
+  disabled?: boolean | undefined;
+  fallbackValue?: string;
+  onValueChange: (value: string) => void;
+  value?: string | undefined;
+}
+
+export function WorkbenchPropertyColorRow({
+  disabled,
+  fallbackValue,
+  onValueChange,
+  value,
+  ...props
+}: WorkbenchPropertyColorRowProps) {
+  return (
+    <WorkbenchPropertyRow {...props}>
+      <WorkbenchColorInput
+        disabled={disabled}
+        fallbackValue={fallbackValue ?? '#000000'}
+        value={value}
+        onValueChange={onValueChange}
+      />
+    </WorkbenchPropertyRow>
+  );
+}
+
+export interface WorkbenchPropertySelectOption<TValue extends string = string> {
+  disabled?: boolean | undefined;
+  label: ReactNode;
+  value: TValue;
+}
+
+export interface WorkbenchPropertySelectRowProps<TValue extends string = string> extends Omit<
+  WorkbenchPropertyRowProps,
+  'children'
+> {
+  controlWidth?: ControlWidth;
+  disabled?: boolean | undefined;
+  onValueChange: (value: TValue) => void;
+  options: readonly WorkbenchPropertySelectOption<TValue>[];
+  value?: TValue | undefined;
+}
+
+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 htmlFor={inputId} {...props}>
+      <Select
+        controlWidth={controlWidth}
+        disabled={disabled}
+        id={inputId}
+        value={value ?? options[0]?.value ?? ''}
+        onValueChange={(next) => onValueChange(next as TValue)}
+      >
+        {options.map((option) => (
+          <option key={option.value} disabled={option.disabled} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </Select>
+    </WorkbenchPropertyRow>
+  );
+}
+
+export interface WorkbenchPropertySelectActionRowProps<TValue extends string = string> extends Omit<
+  WorkbenchPropertyRowProps,
+  'children'
+> {
+  actionDisabled?: boolean | undefined;
+  actionLabel: ReactNode;
+  actionTitle?: string | undefined;
+  controlWidth?: ControlWidth;
+  disabled?: boolean | undefined;
+  onAction: () => void;
+  onValueChange: (value: TValue) => void;
+  options: readonly WorkbenchPropertySelectOption<TValue>[];
+  value?: TValue | undefined;
+}
+
+export function WorkbenchPropertySelectActionRow<TValue extends string = string>({
+  actionDisabled,
+  actionLabel,
+  actionTitle,
+  controlWidth = 'full',
+  disabled,
+  onAction,
+  onValueChange,
+  options,
+  value,
+  ...props
+}: WorkbenchPropertySelectActionRowProps<TValue>) {
+  return (
+    <WorkbenchPropertyRow {...props}>
+      <WorkbenchPropertyInline>
+        <Select
+          controlWidth={controlWidth}
+          disabled={disabled}
+          value={value ?? options[0]?.value ?? ''}
+          onValueChange={(next) => onValueChange(next as TValue)}
+        >
+          {options.map((option) => (
+            <option key={option.value} disabled={option.disabled} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
+        <WorkbenchPropertyToggleButton
+          disabled={actionDisabled}
+          title={actionTitle}
+          type="button"
+          onClick={onAction}
+        >
+          {actionLabel}
+        </WorkbenchPropertyToggleButton>
+      </WorkbenchPropertyInline>
+    </WorkbenchPropertyRow>
+  );
+}
+
+export interface WorkbenchPropertyCheckboxRowProps extends Omit<
+  WorkbenchPropertyRowProps,
+  'children'
+> {
+  checked?: boolean | undefined;
+  checkboxLabel?: ReactNode;
+  disabled?: boolean | undefined;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+export function WorkbenchPropertyCheckboxRow({
+  checked,
+  checkboxLabel,
+  disabled,
+  onCheckedChange,
+  ...props
+}: WorkbenchPropertyCheckboxRowProps) {
+  return (
+    <WorkbenchPropertyRow {...props}>
+      <Checkbox
+        checked={Boolean(checked)}
+        disabled={disabled}
+        label={checkboxLabel}
+        onCheckedChange={onCheckedChange}
+      />
+    </WorkbenchPropertyRow>
+  );
+}
+
+export interface WorkbenchPropertyPanelProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
+  empty?: boolean;
+}
+
+export function WorkbenchPropertyPanel({
+  className,
+  empty = false,
+  ...props
+}: WorkbenchPropertyPanelProps) {
+  return (
+    <div
+      className={cx(
+        'ui-workbench-property-panel',
+        empty && 'ui-workbench-property-panel--empty',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchSectionTitleProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchSectionTitle({ className, ...props }: WorkbenchSectionTitleProps) {
+  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;
+}
+
+export function WorkbenchPropertySection({
+  actions,
+  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
+      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">
+          {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
+        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';
+}
+
+export function WorkbenchPropertyStack({
+  className,
+  gap = 'md',
+  ...props
+}: WorkbenchPropertyStackProps) {
+  return <div className={cx('ui-workbench-property-stack', className)} data-gap={gap} {...props} />;
+}
+
+export interface WorkbenchPropertyGridProps extends ComponentPropsWithRef<'div'> {
+  columns?: 2 | 3;
+  gap?: 'xs' | 'sm' | 'md';
+}
+
+export function WorkbenchPropertyGrid({
+  className,
+  columns = 2,
+  gap = 'sm',
+  ...props
+}: WorkbenchPropertyGridProps) {
+  return (
+    <div
+      className={cx('ui-workbench-property-grid', className)}
+      data-columns={columns}
+      data-gap={gap}
+      {...props}
+    />
+  );
+}
+
+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';
+}
+
+export function WorkbenchPropertyInline({
+  className,
+  justify = 'start',
+  ...props
+}: WorkbenchPropertyInlineProps) {
+  return (
+    <div
+      className={cx('ui-workbench-property-inline', className)}
+      data-justify={justify}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchPropertyHintProps = ComponentPropsWithRef<'span'>;
+
+export function WorkbenchPropertyHint({ className, ...props }: WorkbenchPropertyHintProps) {
+  return <span className={cx('ui-workbench-property-hint', className)} {...props} />;
+}
+
+export type WorkbenchPropertyCardProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchPropertyCard({ className, ...props }: WorkbenchPropertyCardProps) {
+  return <div className={cx('ui-workbench-property-card', className)} {...props} />;
+}
+
+export interface WorkbenchPropertyKeyValueProps extends ComponentPropsWithRef<'div'> {
+  name: ReactNode;
+  value: ReactNode;
+}
+
+export function WorkbenchPropertyKeyValue({
+  className,
+  name,
+  value,
+  ...props
+}: WorkbenchPropertyKeyValueProps) {
+  return (
+    <div className={cx('ui-workbench-property-key-value', className)} {...props}>
+      <span className="ui-workbench-property-key-value__name">{name}</span>
+      <span className="ui-workbench-property-key-value__value">{value}</span>
+    </div>
+  );
+}
+
+export interface WorkbenchPropertyToggleButtonProps extends ButtonProps {
+  active?: boolean;
+}
+
+export function WorkbenchPropertyToggleButton({
+  active = false,
+  className,
+  compact = true,
+  ...props
+}: WorkbenchPropertyToggleButtonProps) {
+  return (
+    <Button
+      className={cx('ui-workbench-property-toggle', className)}
+      compact={compact}
+      data-active={active ? 'true' : 'false'}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchColorRowProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchColorRow({ className, ...props }: WorkbenchColorRowProps) {
+  return <div className={cx('ui-workbench-color-row', className)} {...props} />;
+}
+
+export interface WorkbenchColorInputProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onChange'
+> {
+  disabled?: boolean | undefined;
+  fallbackValue?: string;
+  onValueChange: (value: string) => void;
+  value?: string | undefined;
+}
+
+export function WorkbenchColorInput({
+  disabled = false,
+  fallbackValue = '#000000',
+  onValueChange,
+  value,
+  ...props
+}: WorkbenchColorInputProps) {
+  const currentValue = value ?? fallbackValue;
+
+  return (
+    <WorkbenchColorRow {...props}>
+      <TextInput
+        className="ui-workbench-color-input"
+        disabled={disabled}
+        type="color"
+        value={currentValue}
+        onChange={(event) => onValueChange(event.target.value)}
+      />
+      <TextInput
+        controlWidth="full"
+        disabled={disabled}
+        type="text"
+        value={currentValue}
+        onChange={(event) => onValueChange(event.target.value)}
+      />
+    </WorkbenchColorRow>
+  );
+}
+
+export type WorkbenchParseErrorProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchParseError({ className, ...props }: WorkbenchParseErrorProps) {
+  return <div className={cx('ui-workbench-parse-error', className)} {...props} />;
+}