@tai42/studio-sdk 20.0.0 → 22.0.0

package/src/index.ts

@@ -41,6 +41,7 @@ import './components/components.css';
 
 // -- Plugin API --------------------------------------------------------------
 export type {
+  ChannelConversationRoute,
   NavEntryContribution,
   NavEntrySection,
   PageContribution,
@@ -51,8 +52,11 @@ export type {
   PluginPageProps,
   RegisteredNavEntry,
   RegisteredPage,
+  RegisteredRoutePanel,
   RegisteredSettingsTab,
   RequiredCapabilities,
+  RoutePanelContribution,
+  RoutePanelProps,
   SettingsTabContribution,
   SettingsTabProps,
   ToolPanelContribution,
@@ -60,6 +64,8 @@ export type {
 } from './plugin/types';
 export type { VersionGateResult } from './plugin/version';
 export { checkPluginApiVersion, STUDIO_PLUGIN_API_VERSION } from './plugin/version';
+/** What `useApi().runTool` resolves with: the run-tool door's answer, read by its `kind`. */
+export type { RunAnswer } from '@tai42/api-client';
 
 // -- Hooks -------------------------------------------------------------------
 export type { ApiClient } from './hooks/useApi';
@@ -133,6 +139,8 @@ export {
 
 // -- Utilities ---------------------------------------------------------------
 export { downloadBlob } from './download';
+export type { EnvRef } from './env-markers';
+export { collectEnvRefs, ENV_MARKER_PREFIX, formatEnvMarker, parseEnvMarker } from './env-markers';
 export { errorMessage } from './errors';
 
 // -- Disabled-feature idiom (one helper + component, every consumer) ----------
@@ -163,6 +171,8 @@ export type { BadgeProps } from './components/badge';
 export { Badge } from './components/badge';
 export type { CheckboxProps } from './components/checkbox';
 export { Checkbox } from './components/checkbox';
+export type { ChipGroupProps, ChipOption } from './components/chip-group';
+export { ChipGroup } from './components/chip-group';
 export type { ConfirmDialogProps } from './components/confirm-dialog';
 export { ConfirmDialog } from './components/confirm-dialog';
 export type { DialogProps } from './components/dialog';
@@ -292,11 +302,18 @@ export type { HeadingLevel, MarkdownBlock, MarkdownProps } from './components/ma
 export { Markdown, parseMarkdown } from './components/markdown';
 export type { OpenTargetOptions, OpenTargetProps } from './components/open-target';
 export { openTargetProps } from './components/open-target';
-export type { MediaImageProps } from './components/served-media';
+export type {
+  MediaDocumentProps,
+  MediaImageProps,
+  MediaPlayerProps,
+  ServedMediaGrammar,
+} from './components/served-media';
 export {
   isRenderableMediaSrc,
   isServedMediaUrl,
+  MediaDocument,
   MediaImage,
+  MediaPlayer,
   resolveMediaSrc,
 } from './components/served-media';
 // The URL half of the link-safety pair: `isSafeHttpUrl` answers yes/no, this one
@@ -313,7 +330,6 @@ export {
   groupByKind,
   groupIntoFamilies,
   kindVariant,
-  NON_STACKABLE_KIND,
 } from './components/extension-grouping';
 export type { ExtensionPickerProps } from './components/extension-picker';
 export { ExtensionPicker } from './components/extension-picker';
@@ -399,11 +415,14 @@ export {
 // -- Schema-driven forms -----------------------------------------------------
 export type {
   CompletionProvider,
+  DateRangePair,
   Discriminator,
   ExpressionFieldComponent,
   ExpressionFieldProps,
   ExpressionInputKey,
   ExpressionInputShape,
+  FormControl,
+  FormInputMode,
   JsonSchema,
   JsonSchemaType,
   RecordEntryContext,
@@ -414,6 +433,7 @@ export type {
   SecretRefFieldProps,
 } from './schema-form';
 export {
+  dateRangePairs,
   defaultValueForSchema,
   // The expression-door injection point: a host that wants `x-tai42-expression`
   // fields to author through the visual editor imports `JqField` from

package/src/plugin/coverage.ts

@@ -0,0 +1,23 @@
+/**
+ * Whether a plugin contribution is visible under a capability projection — the one
+ * evaluator every host surface applies to a contribution's optional
+ * `requiredCapabilities`. Host-only (`@tai42/studio-sdk/host`).
+ */
+import type { MeProjection } from '@tai42/api-client';
+
+import { coversAnyRoute, isFullProjection } from '../hooks/useCapabilities';
+import type { RequiredCapabilities } from './types';
+
+/**
+ * A full projection shows every contribution; an ABSENT requirement renders only for a
+ * full projection (safe-by-default); a declared requirement renders when the projection
+ * reaches at least one of its routes.
+ */
+export function contributionCovered(
+  projection: MeProjection,
+  required: RequiredCapabilities | undefined,
+): boolean {
+  if (isFullProjection(projection)) return true;
+  if (required === undefined) return false;
+  return coversAnyRoute(projection, required.routes);
+}

package/src/plugin/registry.ts

@@ -14,7 +14,9 @@ import type {
   PluginEntry,
   RegisteredNavEntry,
   RegisteredPage,
+  RegisteredRoutePanel,
   RegisteredSettingsTab,
+  RoutePanelContribution,
   SettingsTabContribution,
   ToolPanelContribution,
 } from './types';
@@ -23,6 +25,18 @@ const toolPanels = new Map<string, ToolPanelContribution>();
 const pages: RegisteredPage[] = [];
 const settingsTabs: RegisteredSettingsTab[] = [];
 const navEntries: RegisteredNavEntry[] = [];
+const routePanels = new Map<string, RegisteredRoutePanel>();
+
+/**
+ * What the host knows about a plugin from its registry listing entry: `mounts`, the
+ * plugin's own route items and their resolved absolute bases (`{item: "/api/<base>"}`),
+ * and `declaredRoutePanels`, the channels its manifest lists under
+ * `contributions.route_panels`.
+ */
+export interface PluginLoadInputs {
+  readonly mounts: Readonly<Record<string, string>>;
+  readonly declaredRoutePanels: readonly string[];
+}
 
 /** The contributions one plugin stages before they commit as a batch. */
 interface StagedContributions {
@@ -31,6 +45,7 @@ interface StagedContributions {
   readonly settingsTabs: RegisteredSettingsTab[];
   readonly tabIds: Set<string>;
   readonly navEntries: RegisteredNavEntry[];
+  readonly routePanels: Map<string, RegisteredRoutePanel>;
 }
 
 /**
@@ -48,6 +63,7 @@ function emptyStaged(): StagedContributions {
     settingsTabs: [],
     tabIds: new Set(),
     navEntries: [],
+    routePanels: new Map(),
   };
 }
 
@@ -63,6 +79,7 @@ function makeStagingContext(
   pluginId: string,
   staged: StagedContributions,
   seal: Seal,
+  host: PluginLoadInputs,
 ): PluginContext {
   const assertOpen = (): void => {
     if (seal.closed) {
@@ -120,6 +137,16 @@ function makeStagingContext(
       }
       staged.navEntries.push({ ...contribution, pluginId });
     },
+    registerRoutePanel(contribution: RoutePanelContribution): void {
+      assertOpen();
+      if (staged.routePanels.has(contribution.channel) || routePanels.has(contribution.channel)) {
+        throw new Error(`a route panel is already registered for channel ${contribution.channel}`);
+      }
+      staged.routePanels.set(contribution.channel, { ...contribution, pluginId });
+    },
+    routeBase(itemName: string): string | null {
+      return Object.hasOwn(host.mounts, itemName) ? (host.mounts[itemName] ?? null) : null;
+    },
   };
 }
 
@@ -142,6 +169,27 @@ function assertNavEntriesHavePages(pluginId: string, staged: StagedContributions
   }
 }
 
+/**
+ * The channels a plugin registered route panels for must be exactly the channels its
+ * manifest declares: a bundle and its manifest are built together, so a mismatch is a
+ * build fault. Throwing BEFORE any commit keeps atomicity.
+ */
+function assertRoutePanelsDeclared(
+  pluginId: string,
+  staged: StagedContributions,
+  declared: readonly string[],
+): void {
+  const registered = [...staged.routePanels.keys()].sort();
+  const manifest = [...new Set(declared)].sort();
+  const same =
+    registered.length === manifest.length && registered.every((c, i) => c === manifest[i]);
+  if (!same) {
+    throw new Error(
+      `plugin “${pluginId}” registered route panels [${registered.join(', ')}] but its manifest declares [${manifest.join(', ')}]`,
+    );
+  }
+}
+
 /**
  * Commit the staged contributions as one batch, so the registry only ever holds a
  * plugin's complete set — never a partial set left behind by a mid-registration failure.
@@ -151,6 +199,7 @@ function commitStaged(staged: StagedContributions): void {
   for (const [toolName, contribution] of staged.toolPanels) toolPanels.set(toolName, contribution);
   for (const tab of staged.settingsTabs) settingsTabs.push(tab);
   for (const navEntry of staged.navEntries) navEntries.push(navEntry);
+  for (const [channel, panel] of staged.routePanels) routePanels.set(channel, panel);
 }
 
 /**
@@ -164,10 +213,14 @@ function commitStaged(staged: StagedContributions): void {
  * during `entry`'s synchronous body — including a microtask it enqueues then — are
  * still captured and committed. A `register` that throws commits nothing.
  */
-export async function loadPlugin(pluginId: string, entry: PluginEntry): Promise<void> {
+export async function loadPlugin(
+  pluginId: string,
+  entry: PluginEntry,
+  host: PluginLoadInputs,
+): Promise<void> {
   const staged = emptyStaged();
   const seal: Seal = { closed: false };
-  const context = makeStagingContext(pluginId, staged, seal);
+  const context = makeStagingContext(pluginId, staged, seal, host);
 
   try {
     await entry(context);
@@ -178,12 +231,13 @@ export async function loadPlugin(pluginId: string, entry: PluginEntry): Promise<
   }
 
   assertNavEntriesHavePages(pluginId, staged);
+  assertRoutePanelsDeclared(pluginId, staged, host.declaredRoutePanels);
   commitStaged(staged);
 }
 
 /** The shell reads this after loading every installed plugin bundle. */
 export function getContributions(): PluginContributions {
-  return { toolPanels, pages, settingsTabs, navEntries };
+  return { toolPanels, pages, settingsTabs, navEntries, routePanels };
 }
 
 /** Tests reset the module-level registry between cases. */
@@ -192,4 +246,5 @@ export function __resetContributions(): void {
   pages.length = 0;
   settingsTabs.length = 0;
   navEntries.length = 0;
+  routePanels.clear();
 }

package/src/plugin/types.ts

@@ -2,7 +2,7 @@
  * The Studio-plugin authoring contract. A platform plugin ships an ESM bundle
  * that exports a `register(context)` entry ({@link PluginEntry}); the host calls
  * it with a {@link PluginContext} through which the plugin contributes tool
- * panels, pages, settings tabs, and sidebar nav entries.
+ * panels, pages, settings tabs, sidebar nav entries and conversation route panels.
  *
  * Two styling paths are sanctioned, and only these two:
  *  1. SDK components plus inline styles that read the design-system tokens
@@ -20,6 +20,7 @@
  *     its own. Bundled third-party base CSS is exempt from rule (c) but rules
  *     (a) and (b) still bind it.
  */
+import type { ConversationRouteView } from '@tai42/api-client';
 import type { ComponentType } from 'react';
 
 /**
@@ -219,12 +220,43 @@ export interface RegisteredSettingsTab extends SettingsTabContribution {
   readonly pluginId: string;
 }
 
+/** A conversation route row as `GET /api/conversations` lists it, on the `channel` door. */
+export type ChannelConversationRoute = Extract<ConversationRouteView, { readonly door: 'channel' }>;
+
+/** Props a contributed route panel receives. */
+export interface RoutePanelProps {
+  readonly pluginId: string;
+  /** The route row the panel decorates; its `channel` is the contribution's channel. */
+  readonly route: ChannelConversationRoute;
+}
+
+/**
+ * A panel the conversations drill-in renders above the thread list of every route on
+ * one channel. One panel per channel deployment-wide.
+ */
+export interface RoutePanelContribution {
+  /** The channel name whose routes this panel decorates (`ConversationRouteView.channel`). */
+  readonly channel: string;
+  /** Names the panel region (its aria-label and the error card label). */
+  readonly title: string;
+  readonly component: ComponentType<RoutePanelProps>;
+  /** Capability gate (see {@link RequiredCapabilities}); absent ⇒ full-only. */
+  readonly requiredCapabilities?: RequiredCapabilities;
+}
+
+/** A route panel as stored in the registry, stamped with the plugin that registered it. */
+export interface RegisteredRoutePanel extends RoutePanelContribution {
+  readonly pluginId: string;
+}
+
 /** Everything a single plugin bundle has registered at import time. */
 export interface PluginContributions {
   readonly toolPanels: ReadonlyMap<string, ToolPanelContribution>;
   readonly pages: readonly RegisteredPage[];
   readonly settingsTabs: readonly RegisteredSettingsTab[];
   readonly navEntries: readonly RegisteredNavEntry[];
+  /** Route panels keyed by the channel they decorate. */
+  readonly routePanels: ReadonlyMap<string, RegisteredRoutePanel>;
 }
 
 /**
@@ -250,6 +282,18 @@ export interface PluginContext {
    * registers (a nav entry with no page is a dead link and is rejected loudly).
    */
   registerNavEntry(contribution: NavEntryContribution): void;
+  /**
+   * Register a panel for the routes of one channel. The plugin's manifest must list the
+   * same channels under `contributions.route_panels`, or the plugin fails to load.
+   */
+  registerRoutePanel(contribution: RoutePanelContribution): void;
+  /**
+   * The resolved absolute base of one of this plugin's route items, e.g. `/api/channels/web`,
+   * or `null` when the item has no mount on this deployment (an optional router not listed, a
+   * channel not loaded). Never throws; a feature that needs the base shows its own unavailable
+   * state for `null`. Call it during `register` and keep the value.
+   */
+  routeBase(itemName: string): string | null;
 }
 
 /**

package/src/schema-form/SchemaForm.tsx

@@ -95,6 +95,14 @@ export interface SchemaFormProps {
    * renders the plain string input.
    */
   readonly expressionField?: ExpressionFieldComponent;
+  /**
+   * Optional. Per-field picker placeholders, keyed by the root object's property
+   * name. A top-level `enum` field that draws as a select shows its entry's
+   * `choiceLabel` as the select placeholder (in place of the default `Select…`);
+   * other controls and nested fields are unaffected. A field with no entry draws
+   * its own default.
+   */
+  readonly fieldWording?: Readonly<Record<string, { choiceLabel?: string }>>;
 }
 
 /**
@@ -110,6 +118,7 @@ export function SchemaForm({
   completionProvider,
   maxUploadBytes = DEFAULT_MAX_UPLOAD_BYTES,
   expressionField,
+  fieldWording,
 }: SchemaFormProps): ReactNode {
   // The prop overrides the ambient door for this form only; omitted, the
   // enclosing one flows through unchanged (providing `undefined` would BLIND the
@@ -130,6 +139,7 @@ export function SchemaForm({
               required
               errors={errors}
               idPrefix={idPrefix}
+              fieldWording={fieldWording}
             />
           </div>
         </ExpressionFieldContext.Provider>

package/src/schema-form/classify.ts

@@ -19,7 +19,7 @@ import {
   variantTag,
 } from './resolve';
 import { expressionAnnotation, mediaUpload } from './string-annotations';
-import type { JsonSchema } from './types';
+import type { FormControl, FormInputMode, JsonSchema } from './types';
 
 function firstString(...values: readonly unknown[]): string | undefined {
   for (const value of values) {
@@ -64,6 +64,27 @@ function classifyConst(
   };
 }
 
+// The supported `control` values, as a record so the type and the runtime set
+// stay coupled: a value added to FormControl is a compile error here until it is
+// listed.
+const FORM_CONTROLS: Record<FormControl, true> = {
+  chips: true,
+  textarea: true,
+};
+
+/**
+ * The `control` keyword off a property, narrowed to a supported value, or
+ * `undefined` for an absent or unrecognized one. Read defensively (the schema is
+ * permissive): a value outside the set reads as absent, so the field renders its
+ * default control — the server ask door is the authority that refuses it.
+ */
+function controlOf(resolved: JsonSchema): FormControl | undefined {
+  const raw: unknown = resolved.control;
+  return typeof raw === 'string' && Object.hasOwn(FORM_CONTROLS, raw)
+    ? (raw as FormControl)
+    : undefined;
+}
+
 // enum → a fixed choice list.
 function classifyEnum(
   resolved: JsonSchema,
@@ -73,7 +94,13 @@ function classifyEnum(
   const enumValues = resolved.enum ?? [];
   const options: EnumOption[] = enumValues.map((value) => ({ value, label: scalarLabel(value) }));
   const nullable = enumValues.some((value) => value === null);
-  return { model: { kind: 'enum', options }, nullable, schema: resolved, title, description };
+  return {
+    model: { kind: 'enum', options, control: controlOf(resolved) },
+    nullable,
+    schema: resolved,
+    title,
+    description,
+  };
 }
 
 // anyOf/oneOf union normalization.
@@ -214,6 +241,31 @@ function dateConstraints(resolved: JsonSchema): DateConstraints | undefined {
   return { min, max, unavailable, rangeStart, minDays, maxDays };
 }
 
+// The supported `inputMode` values, as a record so the type and the runtime set
+// stay coupled: a value added to FormInputMode is a compile error here until it
+// is listed.
+const INPUT_MODES: Record<FormInputMode, true> = {
+  text: true,
+  numeric: true,
+  decimal: true,
+  tel: true,
+  email: true,
+  url: true,
+};
+
+/**
+ * The `inputMode` keyword off a string property, narrowed to a supported value, or
+ * `undefined` for an absent or unrecognized one. Read defensively (the schema is
+ * permissive): a value outside the set reads as absent, so the field renders as a
+ * plain text box — the server ask door is the authority that refuses it.
+ */
+function inputModeOf(resolved: JsonSchema): FormInputMode | undefined {
+  const raw: unknown = resolved.inputMode;
+  return typeof raw === 'string' && Object.hasOwn(INPUT_MODES, raw)
+    ? (raw as FormInputMode)
+    : undefined;
+}
+
 function classifyString(
   resolved: JsonSchema,
   title: string | undefined,
@@ -224,6 +276,10 @@ function classifyString(
     model: {
       kind: 'string',
       format: resolved.format,
+      inputMode: inputModeOf(resolved),
+      multiline: controlOf(resolved) === 'textarea',
+      maxLength: typeof resolved.maxLength === 'number' ? resolved.maxLength : undefined,
+      minLength: typeof resolved.minLength === 'number' ? resolved.minLength : undefined,
       media: mediaUpload(resolved),
       expression: expressionAnnotation(resolved),
       date: dateConstraints(resolved),
@@ -264,7 +320,7 @@ function classifyArray(
   if (isStringItems && enumValues !== undefined && enumValues.length > 0) {
     const options = enumValues.map((value) => ({ value, label: scalarLabel(value) }));
     return {
-      model: { kind: 'multiselect', options },
+      model: { kind: 'multiselect', options, control: controlOf(resolved) },
       nullable,
       schema: resolved,
       title,

package/src/schema-form/date-range-field.tsx

@@ -0,0 +1,167 @@
+/**
+ * A date RANGE drawn as ONE control. The platform declares a range as two
+ * `string`/`format: date` properties where the END names its START in `rangeStart`;
+ * the answer stays the two date strings, nothing is recombined. Where a pair is
+ * drawable as one control (below), `ObjectFields` renders this {@link DateRangeField}
+ * — a group with the two ends' labels over two native date inputs — at the START's
+ * slot and skips the END; otherwise the two properties draw as two ordinary date
+ * fields (a documented, valid layout).
+ *
+ * {@link dateRangePairs} is the ONE definition of "drawable as one control", reused
+ * by every surface so each surface's merge decision agrees.
+ */
+import type { ReactNode } from 'react';
+
+import { Field } from '../components/field';
+import { TextInput } from '../components/inputs';
+import type { JsonSchema } from './types';
+
+/** A START/END pair drawable as one range control, resolved off a page's properties. */
+export interface DateRangePair {
+  readonly startName: string;
+  readonly startSchema: JsonSchema;
+  readonly endName: string;
+  readonly endSchema: JsonSchema;
+}
+
+/** A property's `visibleWhen` as a stable key for deep-equality (absent ⇒ `''`). */
+function visibilityKey(schema: JsonSchema): string {
+  return schema.visibleWhen === undefined ? '' : JSON.stringify(schema.visibleWhen);
+}
+
+function isDateString(schema: JsonSchema): boolean {
+  return schema.format === 'date';
+}
+
+/**
+ * The date-range pairs among `properties` that are drawable as ONE control. A pair
+ * qualifies when: the END names an existing sibling START in `rangeStart`; BOTH are
+ * `format: date`; both carry the SAME `visibleWhen` (deep-equal, or both absent); AND
+ * no OTHER field's `visibleWhen` names either end — otherwise merging the pair would
+ * leave that field's predicate pointing at a control that no longer draws on its own,
+ * so the pair stays two date fields (the documented degrade). `properties` is ONE
+ * page's ordered list; a field is used in at most one pair.
+ */
+export function dateRangePairs(
+  properties: readonly (readonly [string, JsonSchema])[],
+): readonly DateRangePair[] {
+  const byName = new Map<string, JsonSchema>(properties.map(([name, schema]) => [name, schema]));
+  const pairs: DateRangePair[] = [];
+  const paired = new Set<string>();
+
+  for (const [endName, endSchema] of properties) {
+    if (paired.has(endName)) continue;
+    const startName = endSchema.rangeStart;
+    if (typeof startName !== 'string' || startName === endName || paired.has(startName)) continue;
+    const startSchema = byName.get(startName);
+    if (startSchema === undefined) continue;
+    if (!isDateString(startSchema) || !isDateString(endSchema)) continue;
+    if (visibilityKey(startSchema) !== visibilityKey(endSchema)) continue;
+    const dependedOn = properties.some(
+      ([name, schema]) =>
+        name !== startName &&
+        name !== endName &&
+        typeof schema.visibleWhen?.field === 'string' &&
+        (schema.visibleWhen.field === startName || schema.visibleWhen.field === endName),
+    );
+    if (dependedOn) continue;
+    pairs.push({ startName, startSchema, endName, endSchema });
+    paired.add(startName);
+    paired.add(endName);
+  }
+  return pairs;
+}
+
+/** The field's own `title`, else its property name. */
+function titleOf(schema: JsonSchema, name: string): string {
+  return typeof schema.title === 'string' && schema.title.length > 0 ? schema.title : name;
+}
+
+/** One end of the range: a labelled native date input emitting the date string. */
+function RangeEnd({
+  heading,
+  schema,
+  value,
+  required,
+  error,
+  onChange,
+}: {
+  heading: string;
+  schema: JsonSchema;
+  value: unknown;
+  required: boolean;
+  error: string | undefined;
+  onChange: (value: unknown) => void;
+}): ReactNode {
+  const current = typeof value === 'string' ? value : '';
+  return (
+    <Field label={heading} error={error}>
+      <TextInput
+        type="date"
+        // The native control enforces its inclusive bounds; the validator enforces
+        // the rest (unavailable days, the range span) that the control cannot draw.
+        min={typeof schema.minDate === 'string' ? schema.minDate : undefined}
+        max={typeof schema.maxDate === 'string' ? schema.maxDate : undefined}
+        required={required}
+        value={current}
+        onChange={(event) => {
+          const next = event.target.value;
+          // An empty optional end drops its key; a required one keeps the empty
+          // string so the validator can flag it.
+          onChange(next === '' && !required ? undefined : next);
+        }}
+      />
+    </Field>
+  );
+}
+
+export function DateRangeField({
+  pair,
+  startValue,
+  endValue,
+  startRequired,
+  endRequired,
+  markRequired,
+  startError,
+  endError,
+  onChangeStart,
+  onChangeEnd,
+}: {
+  readonly pair: DateRangePair;
+  readonly startValue: unknown;
+  readonly endValue: unknown;
+  readonly startRequired: boolean;
+  readonly endRequired: boolean;
+  readonly markRequired: boolean;
+  readonly startError: string | undefined;
+  readonly endError: string | undefined;
+  readonly onChangeStart: (value: unknown) => void;
+  readonly onChangeEnd: (value: unknown) => void;
+}): ReactNode {
+  const startTitle = titleOf(pair.startSchema, pair.startName);
+  const endTitle = titleOf(pair.endSchema, pair.endName);
+  const mark = (title: string, required: boolean): string =>
+    markRequired && required ? `${title} *` : title;
+  return (
+    <Field label={`${startTitle} – ${endTitle}`} group>
+      <div className="tai-row">
+        <RangeEnd
+          heading={mark(startTitle, startRequired)}
+          schema={pair.startSchema}
+          value={startValue}
+          required={startRequired}
+          error={startError}
+          onChange={onChangeStart}
+        />
+        <RangeEnd
+          heading={mark(endTitle, endRequired)}
+          schema={pair.endSchema}
+          value={endValue}
+          required={endRequired}
+          error={endError}
+          onChange={onChangeEnd}
+        />
+      </div>
+    </Field>
+  );
+}

package/src/schema-form/enum-field.tsx

@@ -6,6 +6,7 @@
  */
 import type { ReactNode } from 'react';
 
+import { ChipGroup } from '../components/chip-group';
 import { Field } from '../components/field';
 import { RadioGroup } from '../components/radio-group';
 import { Select } from '../components/select';
@@ -22,6 +23,7 @@ export function EnumField({
   model,
   value,
   onChange,
+  choiceLabel,
 }: {
   heading: string;
   description: string | undefined;
@@ -29,6 +31,8 @@ export function EnumField({
   model: Extract<FieldModel, { kind: 'enum' }>;
   value: unknown;
   onChange: (value: unknown) => void;
+  /** The select's placeholder when the field draws as a select; absent shows `Select…`. */
+  choiceLabel?: string;
 }): ReactNode {
   const options = model.options.map((option, index) => ({
     key: String(index),
@@ -44,6 +48,21 @@ export function EnumField({
     if (match !== undefined) onChange(match.value);
   };
 
+  // `control: chips` draws the choice as a chip grid in place of the radio/select,
+  // at any option count.
+  if (model.control === 'chips') {
+    return (
+      <Field label={heading} description={description} error={error} group>
+        <ChipGroup
+          mode="single"
+          options={options.map((option) => ({ value: option.key, label: option.label }))}
+          value={selectedKey}
+          onValueChange={emit}
+        />
+      </Field>
+    );
+  }
+
   if (options.length <= RADIO_MAX_OPTIONS) {
     return (
       <Field label={heading} description={description} error={error} group>
@@ -61,6 +80,7 @@ export function EnumField({
         options={options.map((option) => ({ value: option.key, label: option.label }))}
         value={selectedKey}
         onValueChange={emit}
+        placeholder={choiceLabel}
       />
     </Field>
   );