@finos/legend-cube-builder 0.0.3 → 0.0.5

package/src/components/source-picker/CubeIngestTab.tsx

@@ -0,0 +1,312 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { clsx } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import { CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS } from '../../__lib__/LegendCubeDataProductLabels.js';
+import { getDroppedDefinitionsLabel } from '../../__lib__/LegendCubeIngestLabels.js';
+import {
+  CUBE_PENDING_LABEL,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import type { CubeDataProductEnvironmentType } from '../../graph-manager/CubeDataProduct.js';
+import type {
+  CubeIngestTabError,
+  CubeIngestTabState,
+} from '../../stores/source-picker/CubeIngestTabState.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+import { CubePickerStep } from './CubePickerStep.js';
+import { CUBE_PROJECT_SOURCE_LABEL } from '../../__lib__/LegendCubeProjectSourceLabels.js';
+import { isCubeProjectHost } from '../../stores/CubeHost.js';
+
+const INPUT_CLASS =
+  'h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]';
+
+/** An error as the tab shows it: its first line, the rest on demand, and an action when it has one */
+const CubeIngestTabAlert: React.FC<{
+  error: CubeIngestTabError;
+  children?: React.ReactNode;
+}> = ({ error, children }) => (
+  <div
+    className="flex flex-col gap-1 text-base text-[var(--color-status-error)]"
+    role="alert"
+  >
+    <span>{error.message}</span>
+    {error.detail !== undefined && (
+      <details className="text-sm">
+        <summary className="cursor-pointer">Details</summary>
+        <pre className="whitespace-pre-wrap break-words">{error.detail}</pre>
+      </details>
+    )}
+    {children}
+  </div>
+);
+
+/**
+ * A definition's data sets, as both Ingest screens list them, each picked or
+ * ticked to add; the one picked last previewed
+ */
+const CubeIngestDataSets = observer((props: { tab: CubeIngestTabState }) => {
+  const { tab } = props;
+  return (
+    <>
+      {tab.isDescribing && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          reading the definition
+        </div>
+      )}
+      {tab.dataSets && (
+        <ul
+          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+          aria-label="Data sets"
+        >
+          {tab.dataSets.map((dataSet) => (
+            <CubePickerListItem
+              key={dataSet.name}
+              picked={tab.isDataSetPicked(dataSet.name)}
+              disabled={!dataSet.isPickable}
+              title={dataSet.disabledReason}
+              adds={true}
+              onPick={() => tab.selectDataSet(dataSet.name)}
+              onToggle={() => tab.toggleDataSet(dataSet.name)}
+              toggleLabel={dataSet.name}
+            >
+              <span className="min-w-0 flex-1 truncate">{dataSet.name}</span>
+              <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                {dataSet.isPickable
+                  ? `${dataSet.schema?.columns.length ?? 0} columns`
+                  : dataSet.disabledReason}
+              </span>
+            </CubePickerListItem>
+          ))}
+        </ul>
+      )}
+      {tab.dataSet?.schema && (
+        <section aria-label="Data set preview">
+          <CubeSchemaColumnsTable schema={tab.dataSet.schema} />
+        </section>
+      )}
+    </>
+  );
+});
+
+/**
+ * The Ingest tab on a host reading one project's definitions (Studio): the
+ * project's definitions by name, each path muted beside it, then a
+ * definition's data sets; the runtime its runs use is named, not picked
+ */
+const CubeProjectIngestTab = observer((props: { tab: CubeIngestTabState }) => {
+  const { tab } = props;
+  const candidates = tab.definitionList?.candidates;
+  return (
+    <div className="flex flex-col gap-2">
+      <span
+        className="text-sm text-[var(--color-text-muted)]"
+        aria-label="Runtime"
+      >
+        {tab.environment
+          ? CUBE_PROJECT_SOURCE_LABEL.RUNS_ON(tab.environment.name)
+          : tab.isLoadingEnvironment
+            ? CUBE_PROJECT_SOURCE_LABEL.READING_RUNTIME
+            : ''}
+      </span>
+      {tab.isListingDefinitions && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          listing ingest definitions
+        </div>
+      )}
+      {candidates && (
+        <ul
+          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+          aria-label="Ingest definitions"
+        >
+          {candidates.map((candidate) => (
+            <CubePickerListItem
+              key={candidate.urn}
+              picked={tab.definition?.urn === candidate.urn}
+              title={candidate.definition}
+              onPick={() => tab.selectDefinition(candidate)}
+            >
+              <span className="shrink-0">{candidate.name}</span>
+              <span className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-muted)]">
+                {candidate.definition}
+              </span>
+            </CubePickerListItem>
+          ))}
+        </ul>
+      )}
+      {candidates?.length === 0 && (
+        <span className="text-sm text-[var(--color-text-muted)]">
+          {CUBE_PROJECT_SOURCE_LABEL.NO_INGEST_DEFINITIONS}
+        </span>
+      )}
+      <CubeIngestDataSets tab={tab} />
+      {tab.isAdding && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+        </div>
+      )}
+      {tab.error !== undefined && (
+        <CubeIngestTabAlert error={tab.error}>
+          <div>
+            <CubeButton onClick={() => tab.retry()}>Retry</CubeButton>
+          </div>
+        </CubeIngestTabAlert>
+      )}
+    </div>
+  );
+});
+
+/**
+ * The source dialog's Ingest tab (PLAN §6.7): Mode, the viewer's
+ * environment (read-only), a producer deployment, one of its definitions,
+ * then a data set with its columns. The cube's first data set fixes the
+ * Mode, the producer deployment and the warehouse.
+ */
+export const CubeIngestTab = observer((props: { tab: CubeIngestTabState }) => {
+  const { tab } = props;
+  const warehouseId = useId();
+  const settings = tab.fixedSettings;
+  const dropped = getDroppedDefinitionsLabel(
+    tab.definitionList?.droppedCount ?? 0,
+  );
+  // a host reading one project's definitions, as Studio, lists them alone:
+  // no class, deployment or warehouse to pick, its runtime named instead
+  const projectScoped = isCubeProjectHost(tab.editorState.host);
+  if (projectScoped) {
+    return <CubeProjectIngestTab tab={tab} />;
+  }
+  return (
+    <div className="flex flex-col gap-2">
+      {/* a host with one class, as Studio, offers no choice of Mode */}
+      {(tab.catalog?.environmentTypes.length ?? 0) > 1 && (
+        <CubePickerStep
+          label="Mode"
+          value={tab.environmentType}
+          options={(tab.catalog?.environmentTypes ?? []).map((type) => ({
+            value: type,
+            label: CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS[type],
+          }))}
+          disabled={settings !== undefined}
+          onChange={(value) => {
+            if (value) {
+              tab.setEnvironmentType(value as CubeDataProductEnvironmentType);
+            }
+          }}
+        />
+      )}
+      <div className="flex items-center gap-2 text-base">
+        <span className="w-20 shrink-0">Environment</span>
+        <span aria-label="Environment">
+          {tab.environment?.name ??
+            (tab.isLoadingEnvironment ? 'reading your environment' : '')}
+        </span>
+      </div>
+      <CubePickerStep
+        label="Producer"
+        value={tab.producerDeploymentId}
+        options={(tab.producers ?? []).map((producer) => ({
+          value: producer.deploymentId,
+          label: `Deployment ${producer.deploymentId}`,
+        }))}
+        disabled={settings !== undefined}
+        onChange={(value) => tab.selectProducer(value)}
+      />
+      {settings && (
+        <span className="text-sm text-[var(--color-text-muted)]">
+          {`All of the cube's data sets come from producer deployment ${settings.producerDeploymentId}.`}
+        </span>
+      )}
+      {tab.producerDeploymentId !== undefined && (
+        <input
+          className={INPUT_CLASS}
+          placeholder="Search ingest definitions"
+          aria-label="Search ingest definitions"
+          value={tab.definitionSearch}
+          onChange={(event) => tab.setDefinitionSearch(event.target.value)}
+        />
+      )}
+      {tab.isListingDefinitions && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          listing ingest definitions
+        </div>
+      )}
+      {tab.definitionList && (
+        <ul
+          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+          aria-label="Ingest definitions"
+        >
+          {tab.shownDefinitions.map((candidate) => {
+            const isPicked = tab.definition?.urn === candidate.urn;
+            return (
+              <CubePickerListItem
+                key={candidate.urn}
+                picked={isPicked}
+                title={candidate.definition}
+                onPick={() => tab.selectDefinition(candidate)}
+              >
+                <span className="min-w-0 flex-1 truncate">
+                  {candidate.name}
+                </span>
+                <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                  {`${candidate.groupId}:${candidate.artifactId}`}
+                </span>
+              </CubePickerListItem>
+            );
+          })}
+        </ul>
+      )}
+      {dropped !== undefined && (
+        <span className="text-sm text-[var(--color-text-muted)]">
+          {dropped}
+        </span>
+      )}
+      <CubeIngestDataSets tab={tab} />
+      <div className="flex items-center gap-2">
+        <label className="w-20 shrink-0 text-base" htmlFor={warehouseId}>
+          Warehouse
+        </label>
+        <input
+          id={warehouseId}
+          className={clsx(INPUT_CLASS, 'min-w-0 flex-1')}
+          spellCheck={false}
+          disabled={settings !== undefined || tab.editorState.readOnly}
+          title={tab.editorState.readOnly ? READ_ONLY_CUBE_TITLE : undefined}
+          value={tab.warehouse}
+          onChange={(event) => tab.setWarehouse(event.target.value)}
+        />
+      </div>
+      {tab.isAdding && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+        </div>
+      )}
+      {tab.error !== undefined && (
+        <CubeIngestTabAlert error={tab.error}>
+          <div>
+            <CubeButton onClick={() => tab.retry()}>Retry</CubeButton>
+          </div>
+        </CubeIngestTabAlert>
+      )}
+    </div>
+  );
+});

package/src/components/source-picker/CubeInlineModelTab.tsx

@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
+import { getRelationalDisplayName } from '@finos/legend-cube';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import {
+  CUBE_PENDING_LABEL,
+  CUBE_TABLE_FLAG_LABELS,
+} from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeInlineModelTabState,
+  CubeModelReadKind,
+  isTableSelectable,
+} from '../../stores/source-picker/CubeInlineModelTabState.js';
+import { CubeFunctionSteps, CubeReadKindToggle } from './CubeFunctionSteps.js';
+import { CubePickerStep } from './CubePickerStep.js';
+import { CubeTablePreview } from './CubeTablePreview.js';
+
+/** A model's table steps: a database, a runtime keyed by it, a schema and a table */
+const CubeTableSteps = observer((props: { tab: CubeInlineModelTabState }) => {
+  const { tab } = props;
+  return (
+    <>
+      <CubePickerStep
+        label="Database"
+        value={tab.databasePath}
+        options={tab.databases.map((database) => ({
+          value: database.path,
+          label: database.path,
+        }))}
+        disabled={tab.fixedDatabasePath !== undefined}
+        onChange={(path) => tab.selectDatabase(path)}
+      />
+      <CubePickerStep
+        label="Runtime"
+        value={tab.runtimePath}
+        options={tab.runtimes.map((runtime) => ({
+          value: runtime.path,
+          label: runtime.path,
+        }))}
+        disabled={tab.fixedContext?.runtime !== undefined}
+        onChange={(path) => tab.selectRuntime(path)}
+      />
+      <CubePickerStep
+        label="Schema"
+        value={tab.schemaName}
+        options={tab.schemas.map((schema) => ({
+          value: schema.name,
+          label: getRelationalDisplayName(schema.name),
+        }))}
+        onChange={(name) => tab.selectSchema(name)}
+      />
+      {tab.schemaName !== undefined && (
+        <div className="flex flex-col gap-1">
+          <input
+            className="h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
+            placeholder="Search tables"
+            aria-label="Search tables"
+            value={tab.tableSearch}
+            onChange={(event) => tab.setTableSearch(event.target.value)}
+          />
+          <ul
+            className={`h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+            aria-label="Tables"
+          >
+            {tab.tables.map((table) => {
+              const selectable = isTableSelectable(table);
+              const isPicked = tab.tableNames.includes(table.name);
+              return (
+                <CubePickerListItem
+                  key={table.name}
+                  picked={isPicked}
+                  disabled={!selectable}
+                  adds={true}
+                  onPick={() => tab.selectTable(table.name)}
+                  onToggle={() => tab.toggleTable(table.name)}
+                  toggleLabel={getRelationalDisplayName(table.name)}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {getRelationalDisplayName(table.name)}
+                  </span>
+                  {table.flags.map((flag) => (
+                    <span
+                      key={flag}
+                      className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
+                      title={CUBE_TABLE_FLAG_LABELS[flag].description}
+                    >
+                      {CUBE_TABLE_FLAG_LABELS[flag].label}
+                    </span>
+                  ))}
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {table.columnCount} columns
+                  </span>
+                </CubePickerListItem>
+              );
+            })}
+          </ul>
+          {tab.previewTableName !== undefined && (
+            <CubeTablePreview
+              name={getRelationalDisplayName(tab.previewTableName)}
+              columns={tab.previewedColumns}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+});
+
+/**
+ * The steps after a model is picked, shared by the Sample Data and Project
+ * Database tabs: its loading, then tables or functions (shown when the
+ * model has functions, PLAN §6.5), the steps to one, and why the last step
+ * failed
+ */
+export const CubeOutlineSteps = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    const readsFunctions = tab.readKind === CubeModelReadKind.FUNCTION;
+    return (
+      <>
+        {tab.isLoadingModel && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.LOADING_MODEL}
+          </div>
+        )}
+        {tab.readKinds.length > 1 &&
+          (readsFunctions || Boolean(tab.outline?.functions?.length)) && (
+            <CubeReadKindToggle tab={tab} />
+          )}
+        {readsFunctions ? (
+          <CubeFunctionSteps tab={tab} />
+        ) : (
+          <CubeTableSteps tab={tab} />
+        )}
+        {tab.isResolving && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+          </div>
+        )}
+        {tab.error !== undefined && (
+          <div
+            className="text-base text-[var(--color-status-error)]"
+            role="alert"
+          >
+            {tab.error}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+/**
+ * The source dialog's Sample Data tab (PLAN §6.2.7, §6.9): a bundled dataset,
+ * then a database, a runtime keyed by it, a schema and a table. The dialog's
+ * Add adds the table.
+ */
+export const CubeInlineModelTab = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    const { applicationStore } = tab.editorState.host;
+    const isFixed = tab.fixedContext !== undefined;
+    const fixedModel = JSON.stringify(tab.fixedContext?.model);
+    const fixedModelLabel =
+      tab.models.find((model) =>
+        [model.model, ...(model.earlierModels ?? [])].some(
+          (candidate) => JSON.stringify(candidate) === fixedModel,
+        ),
+      )?.label ?? "The cube's model";
+    return (
+      <div className="flex flex-col gap-2">
+        <CubePickerStep
+          label="Dataset"
+          value={
+            isFixed
+              ? 'fixed'
+              : tab.models.find((model) => model.model === tab.model)?.id
+          }
+          options={
+            isFixed
+              ? [{ value: 'fixed', label: fixedModelLabel }]
+              : tab.models.map((model) => ({
+                  value: model.id,
+                  label: model.label,
+                }))
+          }
+          disabled={isFixed}
+          onChange={(id) => {
+            const model = tab.models.find((candidate) => candidate.id === id);
+            if (model) {
+              flowResult(tab.selectModel(model.model)).catch(
+                applicationStore.alertUnhandledError,
+              );
+            }
+          }}
+        />
+        <CubeOutlineSteps tab={tab} />
+      </div>
+    );
+  },
+);

package/src/components/source-picker/CubePickerListItem.tsx

@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CheckIcon, clsx } from '@finos/legend-art';
+import { createContext, useContext } from 'react';
+
+/**
+ * The source dialog's Add, for a list row that adds what it picks on a
+ * double-click or Enter; nothing outside the dialog
+ */
+export const CubePickerConfirmContext = createContext<(() => void) | undefined>(
+  undefined,
+);
+
+/** A list of the source dialog: rows on the input background, so hover shows */
+export const CUBE_PICKER_LIST_CLASS =
+  'rounded-sm border border-[var(--color-border-subtle)] bg-[var(--color-bg-input)]';
+
+/**
+ * A row of a list in the source dialog: a table, a data set, an access
+ * point, or a step towards one (a data product, an ingest definition).
+ * The picked row shows an accent bar, a check and a stronger background,
+ * which hovering doesn't hide. A row that picks what Add adds (`adds`) adds
+ * it on a double-click, or on Enter once picked (UX audit A1-A3, 2026-10-11).
+ * A row of a list that picks several (`onToggle`) has a checkbox beside it,
+ * which adds it to the picked rows or takes it out, as a Cmd or Ctrl click on
+ * the row does; a plain click picks the row alone, and a double-click adds it
+ * alone.
+ */
+export const CubePickerListItem: React.FC<{
+  picked: boolean;
+  disabled?: boolean | undefined;
+  title?: string | undefined;
+  /** Whether picking this row is the last choice before Add */
+  adds?: boolean | undefined;
+  onPick: () => void;
+  /** Adds the row to the picked ones or takes it out, in a list that picks several */
+  onToggle?: (() => void) | undefined;
+  /** What the row's checkbox is called, e.g. the table's name */
+  toggleLabel?: string | undefined;
+  children: React.ReactNode;
+}> = (props) => {
+  const {
+    picked,
+    disabled,
+    title,
+    adds,
+    onPick,
+    onToggle,
+    toggleLabel,
+    children,
+  } = props;
+  const confirm = useContext(CubePickerConfirmContext);
+  return (
+    <li className={onToggle ? 'flex items-center' : undefined}>
+      {onToggle && (
+        <input
+          type="checkbox"
+          className="ml-2 shrink-0"
+          aria-label={`Pick ${toggleLabel ?? 'this row'}`}
+          checked={picked}
+          disabled={disabled}
+          onChange={onToggle}
+        />
+      )}
+      <button
+        type="button"
+        className={clsx(
+          'flex w-full items-center gap-2 border-l-[3px] px-2 py-1 text-left text-base disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
+          picked
+            ? 'border-[var(--color-accent)] bg-[var(--color-bg-selected)] font-medium'
+            : 'border-transparent enabled:hover:bg-[var(--color-bg-hover)]',
+        )}
+        aria-pressed={picked}
+        disabled={disabled}
+        title={title}
+        onClick={(event) => {
+          if (onToggle && (event.metaKey || event.ctrlKey)) {
+            onToggle();
+          } else {
+            onPick();
+          }
+        }}
+        onDoubleClick={() => {
+          if (adds && !disabled) {
+            onPick();
+            confirm?.();
+          }
+        }}
+        onKeyDown={(event) => {
+          // Enter on the picked row adds it; on another row, it picks it
+          if (event.key === 'Enter' && adds && picked && confirm) {
+            event.preventDefault();
+            confirm();
+          }
+        }}
+      >
+        {children}
+        <span className="flex w-4 shrink-0 justify-center text-[var(--color-accent)]">
+          {picked && <CheckIcon aria-hidden={true} />}
+        </span>
+      </button>
+    </li>
+  );
+};

package/src/components/source-picker/CubePickerStep.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useId } from 'react';
+
+/** One step of the picker: a labelled list of choices, read-only when the cube fixes it */
+export const CubePickerStep: React.FC<{
+  label: string;
+  value: string | undefined;
+  options: readonly { value: string; label: string }[];
+  disabled?: boolean;
+  onChange: (value: string | undefined) => void;
+}> = ({ label, value, options, disabled, onChange }) => {
+  const id = useId();
+  return (
+    <div className="flex items-center gap-2">
+      <label className="w-20 shrink-0 text-base" htmlFor={id}>
+        {label}
+      </label>
+      <select
+        id={id}
+        className="h-7 min-w-0 flex-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]"
+        value={value ?? ''}
+        disabled={Boolean(disabled) || !options.length}
+        onChange={(event) => onChange(event.target.value || undefined)}
+      >
+        {value === undefined && <option value="">Choose…</option>}
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};