@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/input.usage.gts

@@ -0,0 +1,208 @@
+// Pretui — Input usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { Input as PretuiInput } from './input';
+import { Field } from './field';
+import { Select } from './select';
+
+const INPUT_TYPES = [
+  'text',
+  'email',
+  'password',
+  'number',
+  'search',
+  'url',
+  'date',
+];
+const PAIR_OPTIONS = ['Draft', 'In review', 'Published'].map((label) => ({
+  value: label,
+  label,
+}));
+
+// ── Input ← input/usage.gts ──────────────────────────────────────────────
+// Input wraps BoxelInput: the message rows belong to the component itself
+// (@helperText / @errorMessage / @required / @optional are boxel machinery
+// surfaced as Pretui args); the wrapping Field still owns the label.
+// Dropped knobs: @min / @max (native attrs — splat them), @bottomTreatment (single rounded shape), @size (single 28px
+// control height), @onKeyPress / @onFocus / @onBlur (use native event
+// splatting), textarea type (separate Textarea component), checkbox type
+// (separate Checkbox component).
+export class InputUsage extends Component {
+  typeOptions = INPUT_TYPES;
+  pairOptions = PAIR_OPTIONS;
+  @tracked value = '';
+  @tracked type = 'text';
+  @tracked placeholder = 'Please enter';
+  @tracked invalid = false;
+  @tracked disabled = false;
+  @tracked readonly = false;
+  @tracked label = 'Full name';
+  @tracked helperText = '';
+  @tracked errorMessage = 'This value is invalid.';
+  @tracked required = false;
+  @tracked optionalArg = false;
+  setValue = (v: string) => (this.value = v);
+  setType = (v: string) => (this.type = v);
+  setPlaceholder = (v: string) => (this.placeholder = v);
+  setInvalid = (v: boolean) => (this.invalid = v);
+  setDisabled = (v: boolean) => (this.disabled = v);
+  setReadonly = (v: boolean) => (this.readonly = v);
+  setLabel = (v: string) => (this.label = v);
+  setHelperText = (v: string) => (this.helperText = v);
+  setErrorMessage = (v: string) => (this.errorMessage = v);
+  setRequired = (v: boolean) => (this.required = v);
+  setOptionalArg = (v: boolean) => (this.optionalArg = v);
+  get usage() {
+    let bits = [`@value='${this.value}'`];
+    if (this.type !== 'text') bits.push(`@type='${this.type}'`);
+    if (this.placeholder) bits.push(`@placeholder='${this.placeholder}'`);
+    if (this.invalid) bits.push('@invalid={{true}}');
+    if (this.disabled) bits.push('@disabled={{true}}');
+    if (this.readonly) bits.push('@readonly={{true}}');
+    bits.push('@onInput={{this.setValue}}');
+    return `<Input ${bits.join(' ')} />`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='Input'
+      @description='Form text input field riding boxel-ui BoxelInput — validation states, error/helper message rows, optional indicator — in the Pretui control dress. Supports text, email, password, number, search, url, and date types.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <Field @label={{this.label}} as |controlId|>
+          <PretuiInput
+            @controlId={{controlId}}
+            @value={{this.value}}
+            @type={{this.type}}
+            @placeholder={{this.placeholder}}
+            @invalid={{this.invalid}}
+            @disabled={{this.disabled}}
+            @readonly={{this.readonly}}
+            @helperText={{this.helperText}}
+            @errorMessage={{this.errorMessage}}
+            @required={{this.required}}
+            @optional={{this.optionalArg}}
+            @onInput={{this.setValue}}
+          />
+        </Field>
+        <p class='pretui-demo-readout' data-test-input-readout>
+          type = {{this.type}} · value = “{{this.value}}”
+        </p>
+        {{! Input and Select share one field style; disabled applies to both }}
+        <div class='pretui-demo-pair' data-test-input-select-pair>
+          <Field @label='Input' as |controlId|>
+            <PretuiInput
+              @controlId={{controlId}}
+              @type={{this.type}}
+              @placeholder={{this.placeholder}}
+              @disabled={{this.disabled}}
+            />
+          </Field>
+          <Field @label='Select' as |controlId|>
+            <Select
+              @controlId={{controlId}}
+              @options={{this.pairOptions}}
+              @placeholder={{this.placeholder}}
+              @disabled={{this.disabled}}
+            />
+          </Field>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.Base
+          @name='controlId'
+          @description="The input's id for label wiring — supplied by the wrapping Field's yielded controlId; replaces boxel-ui's @id."
+        />
+        <Args.String
+          @name='type'
+          @value={{this.type}}
+          @options={{this.typeOptions}}
+          @defaultValue='text'
+          @description='Native input type — pick number or password to see the control change shape.'
+          @onInput={{this.setType}}
+        />
+        <Args.String
+          @name='value'
+          @value={{this.value}}
+          @onInput={{this.setValue}}
+        />
+        <Args.Bool
+          @name='invalid'
+          @value={{this.invalid}}
+          @description="The validation state of the input — boxel-ui's @state enum, now a boolean."
+          @onInput={{this.setInvalid}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @value={{this.disabled}}
+          @onInput={{this.setDisabled}}
+        />
+        <Args.Bool
+          @name='readonly'
+          @value={{this.readonly}}
+          @description='Native readonly: focusable and copyable, not dimmed.'
+          @onInput={{this.setReadonly}}
+        />
+        <Args.String
+          @name='errorMessage'
+          @value={{this.errorMessage}}
+          @description="Error row under the control — boxel-ui's @errorMessage; renders only while @invalid."
+          @onInput={{this.setErrorMessage}}
+        />
+        <Args.String
+          @name='helperText'
+          @value={{this.helperText}}
+          @description="Helper row under the control — boxel-ui's @helperText."
+          @onInput={{this.setHelperText}}
+        />
+        <Args.Bool
+          @name='required'
+          @value={{this.required}}
+          @description='Native required; also suppresses the optional indicator.'
+          @onInput={{this.setRequired}}
+        />
+        <Args.Bool
+          @name='optional'
+          @value={{this.optionalArg}}
+          @description="Renders boxel-ui's 'Optional' indicator above the control."
+          @onInput={{this.setOptionalArg}}
+        />
+        <Args.String
+          @name='placeholder'
+          @value={{this.placeholder}}
+          @description='Placeholder text'
+          @onInput={{this.setPlaceholder}}
+        />
+        <Args.String
+          @name='label'
+          @value={{this.label}}
+          @description='Field label — set on the wrapping Field, not on Input.'
+          @onInput={{this.setLabel}}
+        />
+        <Args.Action
+          @name='onInput'
+          @description='Receives the changed value as a string'
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .pretui-demo-pair {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: var(--boxel-sp-sm);
+        margin-block-start: var(--boxel-sp);
+      }
+      .pretui-demo-readout {
+        margin: 8px 0 0;
+        font-family: var(--font-mono);
+        font-size: var(--text-ui-xs, 11px);
+        color: var(--muted-foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_INPUT: Record<string, unknown> = {
+  Input: InputUsage,
+};

package/bundled-realms/pretui/components/interactive-input.gts

@@ -0,0 +1,343 @@
+// Pretui — InteractiveInput: an agent-asked question answered with options or free text.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { guidFor } from '@ember/object/internals';
+import { Button } from './button';
+import { cssDeclaration, cssStyleFrom } from '../pretui-css';
+
+// ── InteractiveInput ─────────────────────────────────────────────────────
+// The agent needs a value before it can continue, and the whole point of the
+// pattern is that it asks with a TYPED picker rather than free text: the
+// answer is one of a known set, so the reader chooses instead of spelling.
+// Answering does not resume anything — it arms an explicit "Re-run with X",
+// because a value that silently restarts a run is a value you cannot review.
+//
+// The picker is a real `<fieldset>` of native radio inputs. That is not
+// pedantry: it is where arrow-key navigation, Home/End, the grouped
+// announcement ("Accent colour, 2 of 5") and the `:checked` styling hook all
+// come from, none of which the swatch-div original had. Callers who need a
+// picker this shape cannot express (a date, a card reference) replace the
+// whole control through the `<:picker>` block.
+
+export interface InteractiveInputOption {
+  /** the value handed back to `@onValueChange` and shown in the re-run CTA */
+  value: string;
+  /** the face; defaults to the value */
+  label?: string;
+  /**
+   * a colour to paint as a swatch beside the label. Caller strings reaching
+   * CSS go through the kit-wide `cssValue` allowlist — a rejected value
+   * simply loses its swatch, it never becomes a declaration.
+   */
+  swatch?: string;
+}
+
+export interface InteractiveInputSignature {
+  Args: {
+    /** the tier verb; 'INPUT' by default, matching the WorkItem grammar */
+    verb?: string;
+    /** what is being asked, e.g. 'Pick the accent for the callout' */
+    prompt: string;
+    /** optional second line of context under the prompt */
+    detail?: string;
+    /** the typed choices; omit and supply `<:picker>` instead */
+    options?: InteractiveInputOption[];
+    /** controlled selection */
+    value?: string;
+    /** starting selection when uncontrolled */
+    defaultValue?: string;
+    /** fires with the newly picked value */
+    onValueChange?: (value: string) => void;
+    /** fires when the reader commits — the re-run */
+    onRerun?: (value: string) => void;
+    /**
+     * settled state. Once `answered`, the picker is disabled and the block
+     * reads as a receipt rather than a live request — the quiet settle the
+     * attention grammar asks for.
+     */
+    answered?: boolean;
+    /** what the settled receipt says (default 're-executed') */
+    answeredLabel?: string;
+    /** CTA wording; receives the picked value (default 'Re-run with X') */
+    rerunLabel?: (value: string) => string;
+  };
+  Blocks: {
+    /** replaces the built-in radio picker; receives the current value and a
+     * setter, so a custom control still reports through the same channel */
+    picker: [value: string, setValue: (v: string) => void];
+  };
+  Element: HTMLDivElement;
+}
+
+export class InteractiveInput extends Component<InteractiveInputSignature> {
+  @tracked private innerValue?: string;
+
+  private groupName = guidFor(this) + '-choice';
+
+  get options(): InteractiveInputOption[] {
+    return this.args.options ?? [];
+  }
+  get value(): string {
+    return (
+      this.args.value ??
+      this.innerValue ??
+      this.args.defaultValue ??
+      this.options[0]?.value ??
+      ''
+    );
+  }
+  get verb(): string {
+    return this.args.verb ?? 'INPUT';
+  }
+  get answered(): boolean {
+    return this.args.answered ?? false;
+  }
+  get answeredLabel(): string {
+    return this.args.answeredLabel ?? 're-executed';
+  }
+  get rerunText(): string {
+    let value = this.value;
+    if (this.args.rerunLabel) {
+      return this.args.rerunLabel(value);
+    }
+    return value ? 'Re-run with ' + value : 'Re-run';
+  }
+  get rows(): {
+    value: string;
+    label: string;
+    checked: boolean;
+    style: ReturnType<typeof cssStyleFrom>;
+  }[] {
+    return this.options.map((option) => ({
+      value: option.value,
+      label: option.label ?? option.value,
+      checked: option.value === this.value,
+      style: cssStyleFrom([cssDeclaration('--pretui-swatch', option.swatch)]),
+    }));
+  }
+
+  setValue = (next: string) => {
+    if (this.args.value === undefined) {
+      this.innerValue = next;
+    }
+    this.args.onValueChange?.(next);
+  };
+
+  pick = (value: string) => this.setValue(value);
+
+  rerun = () => this.args.onRerun?.(this.value);
+
+  <template>
+    <div
+      class='pretui-iinput'
+      data-answered={{if this.answered 'true'}}
+      data-test-pretui-interactive-input
+      ...attributes
+    >
+      <div class='pretui-iinput-head'>
+        <span class='pretui-iinput-verb'>{{this.verb}}</span>
+        <span class='pretui-iinput-prompt'>{{@prompt}}</span>
+        {{#if this.answered}}
+          <span class='pretui-iinput-settled'>{{this.answeredLabel}}</span>
+        {{/if}}
+      </div>
+      {{#if @detail}}
+        <p class='pretui-iinput-detail'>{{@detail}}</p>
+      {{/if}}
+
+      <div class='pretui-iinput-body'>
+        {{#if (has-block 'picker')}}
+          {{yield this.value this.setValue to='picker'}}
+        {{else}}
+          <fieldset class='pretui-iinput-set' disabled={{if this.answered true}}>
+            <legend class='pretui-sr'>{{@prompt}}</legend>
+            {{#each this.rows key='value' as |row|}}
+              <label class='pretui-iinput-opt'>
+                <input
+                  type='radio'
+                  name={{this.groupName}}
+                  value={{row.value}}
+                  checked={{if row.checked true}}
+                  {{on 'change' (fn this.pick row.value)}}
+                />
+                <span class='pretui-iinput-swatch' style={{row.style}}></span>
+                <span class='pretui-iinput-face'>{{row.label}}</span>
+              </label>
+            {{/each}}
+          </fieldset>
+        {{/if}}
+      </div>
+
+      {{#unless this.answered}}
+        <div class='pretui-iinput-foot'>
+          <Button
+            @size='s'
+            @disabled={{unless this.value true}}
+            {{on 'click' this.rerun}}
+            data-test-pretui-interactive-input-rerun
+          >{{this.rerunText}}</Button>
+        </div>
+      {{/unless}}
+    </div>
+
+    <style scoped>
+      @layer PretComponent {
+        .pretui-iinput {
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-3, 8px);
+          padding: var(--space-3, 9px) var(--space-4, 11px);
+          border-radius: 10px;
+          background: linear-gradient(
+            180deg,
+            color-mix(
+              in oklch,
+              var(--pretui-attention, var(--boxel-fuschia)) 7%,
+              var(--card)
+            ),
+            var(--card) 55%
+          );
+          box-shadow:
+            0 0 0 1px
+              color-mix(
+                in oklch,
+                var(--pretui-attention, var(--boxel-fuschia)) 55%,
+                var(--border)
+              ),
+            0 2px 10px
+              color-mix(
+                in oklch,
+                var(--pretui-attention, var(--boxel-fuschia)) 12%,
+                transparent
+              );
+          font-size: var(--text-ui-md, 12.5px);
+        }
+        /* settled: the attention hue is reserved for "a human must act now",
+           so an answered block gives it back */
+        .pretui-iinput[data-answered] {
+          background: var(--card);
+          box-shadow: var(
+            --pretui-shadow-hairline,
+            0 0 0 1px var(--border)
+          );
+        }
+        .pretui-iinput-head {
+          display: flex;
+          align-items: baseline;
+          gap: 8px;
+          flex-wrap: wrap;
+        }
+        .pretui-iinput-verb {
+          font-family: var(--font-mono);
+          font-size: 10px;
+          font-weight: 600;
+          letter-spacing: 0.06em;
+          color: var(--pretui-attention-ink, var(--pretui-attention, var(--boxel-fuschia)));
+          flex: none;
+        }
+        .pretui-iinput[data-answered] .pretui-iinput-verb {
+          color: var(--muted-foreground);
+        }
+        .pretui-iinput-prompt {
+          font-weight: 600;
+          min-width: 0;
+        }
+        .pretui-iinput-settled {
+          margin-left: auto;
+          font-size: var(--text-ui-sm, 11.5px);
+          color: var(--muted-foreground);
+        }
+        .pretui-iinput-detail {
+          margin: 0;
+          max-width: 62ch;
+          font-size: var(--text-ui-sm, 11.5px);
+          line-height: 1.6;
+          color: var(--muted-foreground);
+        }
+        .pretui-iinput-set {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+          margin: 0;
+          padding: 0;
+          border: 0;
+          min-inline-size: 0;
+        }
+        .pretui-iinput-opt {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          min-height: 30px;
+          padding: 0 10px;
+          border-radius: 999px;
+          background: var(--card);
+          box-shadow: var(
+            --pretui-shadow-hairline,
+            0 0 0 1px var(--border)
+          );
+          font-size: var(--text-ui-sm, 11.5px);
+          cursor: pointer;
+        }
+        .pretui-iinput-set:disabled .pretui-iinput-opt {
+          cursor: default;
+          opacity: 0.75;
+        }
+        .pretui-iinput-opt input {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          opacity: 0;
+          pointer-events: none;
+        }
+        .pretui-iinput-swatch {
+          width: 12px;
+          height: 12px;
+          border-radius: 4px;
+          flex: none;
+          background: var(--pretui-swatch, var(--muted-foreground));
+          box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
+        }
+        /* selection is never colour alone — the checked pill also gains weight
+           and a ring, so it survives greyscale */
+        .pretui-iinput-opt:has(input:checked) {
+          font-weight: 600;
+          background: color-mix(
+            in oklch,
+            var(--primary) 10%,
+            var(--card)
+          );
+          box-shadow:
+            0 0 0 1px
+              color-mix(in oklch, var(--primary) 55%, var(--border)),
+            inset 0 0 0 1px
+              color-mix(in oklch, var(--primary) 20%, transparent);
+        }
+        .pretui-iinput-opt:has(input:focus-visible) {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        .pretui-iinput-foot {
+          display: flex;
+          justify-content: flex-end;
+        }
+        .pretui-sr {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+        /* coarse pointers get a 44px hit target without changing the fine one */
+        @media (any-pointer: coarse) {
+          .pretui-iinput-opt {
+            min-height: 44px;
+            padding: 0 14px;
+          }
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/interactive-input.md

@@ -0,0 +1,45 @@
+## What it is
+
+The agent asking the reader a question mid-run: a prompt, a set of typed choices, and a re-run control that settles into a receipt once answered.
+
+## The contract
+
+```
+@verb?    — the tier verb. Default 'INPUT', matching the WorkItem grammar
+@prompt (required) — what is being asked
+@detail?  — a second line of context under the prompt
+@options? — the typed choices; omit and supply <:picker> instead
+@value?, @defaultValue?, @onValueChange? — the selection
+@onRerun? — fires when the reader commits: the re-run
+@answered? — settled state
+```
+
+**Once `answered`, the picker is disabled and the block reads as a receipt** rather than a live request. That is the quiet settle the kit's attention grammar asks for: a transcript should not be full of questions that look like they are still waiting.
+
+**`@verb` matches the WorkItem grammar** so an input request sits in a run's timeline as one more tiered entry rather than as a foreign element.
+
+**`<:picker>` replaces `@options`** for a question whose answer is not a flat list.
+
+## Prior art
+
+The inline question surfaces in agent products, and the JSX design mirror these descend from.
+
+Where Pretui is better: **it is a real `<fieldset>` of native radios instead of a div soup of swatches.** That single choice is where the arrow keys, Home/End and grouped announcement come from — all of it free from the platform, none of it re-implemented, and all of it missing upstream.
+
+Where it is thinner: single-select only — no multi-choice or free-text answer — no timeout or default-after-waiting, and no way to answer several pending questions at once.
+
+## Accessibility
+
+- **A `<fieldset>` with a legend, containing native radios.** The group is announced as a group, the options as its members, and the keyboard contract is the platform's.
+- **The settled state disables rather than removes.** An answered question stays readable as a receipt, so a reader moving back through a transcript can see what was asked and what was chosen.
+- **`@prompt` is the legend**, so the question is announced when the group is entered rather than being loose text above it.
+- **`@detail` is associated with the group**, not left as an adjacent paragraph.
+- **The re-run is a separate, named control**, so committing is deliberate rather than happening on selection.
+
+## Theming
+
+The block takes the agentic set's shared tier and attention tokens, and the radios are the kit's own — nothing here defines a surface.
+
+That is what makes an input request look like part of the run rather than like a modal interrupting it, which is the entire design intent: the agent is asking inside its work, not stopping to open a dialog.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/interactive-input.usage.gts

@@ -0,0 +1,98 @@
+// Pretui — InteractiveInput usage page.
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { FreestyleUsage } from './freestyle-usage';
+import { Button } from './button';
+import { InteractiveInput } from './interactive-input';
+import type { InteractiveInputOption } from './interactive-input';
+
+// ── InteractiveInput ─────────────────────────────────────────────────────
+const SWATCHES: InteractiveInputOption[] = [
+  { value: '#C3FC33', label: 'Lime', swatch: '#C3FC33' },
+  { value: '#00A884', label: 'Jade', swatch: '#00A884' },
+  { value: '#AC00FF', label: 'Violet', swatch: '#AC00FF' },
+  { value: '#E3474C', label: 'Vermilion', swatch: '#E3474C' },
+];
+
+class InteractiveInputUsage extends GlimmerComponent {
+  @tracked value = '#C3FC33';
+  @tracked answered = false;
+
+  setValue = (value: string) => (this.value = value);
+  setAnswered = (answered: boolean) => (this.answered = answered);
+  rerun = () => (this.answered = true);
+  reset = () => (this.answered = false);
+
+  <template>
+    <FreestyleUsage
+      @name='InteractiveInput'
+      @description='The agent cannot continue until it has a value, and the whole point of the pattern is that it asks with a TYPED picker rather than free text: the answer is one of a known set, so the reader chooses instead of spelling. Answering does not resume anything — it arms an explicit "Re-run with #C3FC33", because a value that silently restarts a run is a value you cannot review. The picker is a real fieldset of native radios, which is where the arrow keys, Home/End, the grouped announcement and the :checked styling hook all come from; the swatch-div original had none of them. While the request is live the block wears the reserved attention hue, and the moment it settles it gives that hue back.'
+    >
+      <:example>
+        <InteractiveInput
+          @prompt='Which accent should the callout use?'
+          @detail='It will be applied to every callout in the generated report.'
+          @options={{SWATCHES}}
+          @value={{this.value}}
+          @onValueChange={{this.setValue}}
+          @onRerun={{this.rerun}}
+          @answered={{this.answered}}
+        />
+        <p class='demo-log'>picked:
+          <strong>{{this.value}}</strong></p>
+        <Button
+          @tone='neutral'
+          @appearance='outlined'
+          @size='s'
+          {{on 'click' this.reset}}
+        >Ask again</Button>
+      </:example>
+      <:api as |Args|>
+        <Args.Object
+          @name='options'
+          @description='The typed choices: { value, label?, swatch? }. `swatch` is a caller colour, so it goes through the kit-wide cssValue allowlist — a rejected value loses its swatch rather than becoming a declaration.'
+          @value={{SWATCHES}}
+        />
+        <Args.String
+          @name='value'
+          @description='The current pick. Uncontrolled by default (@defaultValue seeds it, else the first option).'
+          @value={{this.value}}
+          @onInput={{this.setValue}}
+        />
+        <Args.Bool
+          @name='answered'
+          @description='Settled: the picker disables and the block reads as a receipt in the quiet palette instead of a live request.'
+          @value={{this.answered}}
+          @onInput={{this.setAnswered}}
+          @defaultValue={{false}}
+        />
+        <Args.Yield
+          @name='picker'
+          @description='Replaces the built-in radio picker, receiving (value, setValue). This is the escape hatch for a value this component cannot express as a pill — a date, a card reference, a numeric range — without widening the option shape until it means nothing.'
+          @hideControls={{true}}
+        />
+        <Args.Base
+          @name='verb / prompt / detail / onRerun / rerunLabel / answeredLabel'
+          @description='The tier verb (default INPUT, matching the WorkItem grammar), the question and its second line, the commit callback, and the two wordings. @rerunLabel receives the picked value, so a caller can phrase the CTA in their own domain.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .demo-log {
+        margin: var(--space-4, 11px) 0 var(--space-3, 7px);
+        font-size: var(--text-ui-sm, 11.5px);
+        color: var(--muted-foreground);
+      }
+      .demo-log strong {
+        font-family: var(--font-mono);
+        color: var(--foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_INTERACTIVE_INPUT: Record<string, unknown> = {
+  InteractiveInput: InteractiveInputUsage,
+};