From e82dade07139b4bcd764ab3bdd5817196f2638d2 Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Tue, 7 Jul 2026 08:55:31 -0700
Subject: [PATCH 1/3] feat(apollo-react): add LockableValueField HITL prototype
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prototype for a Quick Approve panel demonstrating quick-form editing
inside the Property Panel experience.

- LockableValueField: a string field built on apollo-wind's InputGroup,
  with a lock/unlock popover (locked = read-only, not disabled) and a
  Fixed value / Expression type-switcher popover, plus an AI-assist
  popover (describe + generate) and an Insert-variable affordance.
- NodePropertyPanel "Lockable Field" story: a Quick Approve panel with
  a Delivery channel multi-select, an Assignment criteria search +
  dropdown, and a Quick form section (UI/JSON toggle) containing a
  draggable, deletable, re-orderable list of LockableValueField rows
  seeded with Invoice Number / Submission Date / Approved Amount.

Built entirely on existing apollo-wind primitives (InputGroup,
DropdownMenu, Popover, MultiSelect, Select, Card, ToggleGroup) and the
existing @dnd-kit dependency already used by StageNode, following this
file's established prototype conventions (PanelFrame, CasePanel-style
row chrome). No production wiring yet — this is a review prototype.
---
 .../NodePropertyPanel/LockableValueField.tsx  | 257 +++++++++++++
 .../NodePropertyPanel.stories.tsx             | 348 +++++++++++++++++-
 .../components/NodePropertyPanel/index.ts     |   2 +
 3 files changed, 605 insertions(+), 2 deletions(-)
 create mode 100644 packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx

diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx b/packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx
new file mode 100644
index 000000000..a5c3b69fd
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx
@@ -0,0 +1,257 @@
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Textarea,
+} from '@uipath/apollo-wind';
+import { ChevronDown, Code2, Lock, LockOpen, Sparkles, Type } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { useId } from 'react';
+
+export type LockableValueFieldMode = 'fixed' | 'expression';
+
+export interface LockableValueFieldProps {
+  /** Current field value. */
+  value?: string;
+  /** Called when the user edits the value (only fires while unlocked). */
+  onValueChange?: (value: string) => void;
+  /** Whether the field is read-only. Defaults to true. */
+  locked?: boolean;
+  /** Called when the user toggles the lock. */
+  onLockedChange?: (locked: boolean) => void;
+  /** Fixed value vs. JS expression. Defaults to 'fixed'. */
+  mode?: LockableValueFieldMode;
+  /** Called when the user switches modes. */
+  onModeChange?: (mode: LockableValueFieldMode) => void;
+  /** Shows a required-field asterisk next to the default label. Ignored when `label` is provided. */
+  required?: boolean;
+  /** Overrides the default mode-based label (e.g. a field name instead of "String value"). */
+  label?: ReactNode;
+  /** Extra content rendered after the built-in AI assist / Insert variable buttons (e.g. a delete button). */
+  headerActions?: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+const FIELD_LABEL: Record<LockableValueFieldMode, string> = {
+  fixed: 'String value',
+  expression: 'Write a string expression',
+};
+
+const FIELD_PLACEHOLDER: Record<LockableValueFieldMode, string> = {
+  fixed: 'Enter a value',
+  expression: 'Enter an expression',
+};
+
+/**
+ * LockableValueField — a string field that can be locked to read-only and
+ * switched between a literal value and a JS expression.
+ *
+ * Prototype: the expression mode is styled as code (monospace) but does not
+ * yet carry real syntax highlighting or evaluation. See ExpressionField for
+ * the direction a full code-editing surface would take.
+ */
+export function LockableValueField({
+  value = '',
+  onValueChange,
+  locked = true,
+  onLockedChange,
+  mode = 'fixed',
+  onModeChange,
+  required,
+  label,
+  headerActions,
+  id,
+  className,
+}: LockableValueFieldProps) {
+  const promptId = useId();
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)}>
+      <div className="flex items-center gap-1">
+        {label ?? (
+          <Label htmlFor={id} className="text-xs font-medium text-foreground-muted">
+            {FIELD_LABEL[mode]}
+            {required && <span className="ml-0.5 text-destructive">*</span>}
+          </Label>
+        )}
+        <div className="ml-auto flex items-center gap-0.5">
+          <Popover>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                aria-label="AI assist"
+                title="AI assist"
+                className="grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
+              >
+                <Sparkles size={12} />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="space-y-3">
+              <div className="space-y-1.5">
+                <Label htmlFor={promptId} className="text-xs font-medium text-foreground-muted">
+                  Describe what you want
+                </Label>
+                <Textarea
+                  id={promptId}
+                  rows={3}
+                  placeholder="Display a value from the previous step"
+                  className="resize-none text-sm"
+                />
+              </div>
+              <span className="block text-[11px] text-foreground-subtle">
+                Output: String expression
+              </span>
+              <Button size="sm" className="w-full">
+                Generate
+              </Button>
+            </PopoverContent>
+          </Popover>
+          <button
+            type="button"
+            aria-label="Insert variable"
+            title="Insert variable"
+            className="flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
+          >
+            <span className="font-mono text-[10px]">{'{x}'}</span>
+            <span>Insert</span>
+            <ChevronDown size={9} />
+          </button>
+          {headerActions}
+        </div>
+      </div>
+
+      <InputGroup>
+        <InputGroupAddon align="inline-start">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <InputGroupButton
+                icon
+                size="3xs"
+                aria-label={locked ? 'Locked. Click to unlock.' : 'Unlocked. Click to lock.'}
+              >
+                {locked ? <Lock /> : <LockOpen />}
+              </InputGroupButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-56">
+              <DropdownMenuItem
+                className="flex-col items-start gap-0.5 py-2"
+                onClick={() => onLockedChange?.(false)}
+              >
+                <div className="flex items-center gap-2">
+                  <LockOpen
+                    size={13}
+                    className={!locked ? 'text-brand' : 'text-foreground-muted'}
+                  />
+                  <span
+                    className={cn(
+                      'text-xs font-medium',
+                      !locked ? 'text-brand' : 'text-foreground'
+                    )}
+                  >
+                    Unlocked
+                  </span>
+                </div>
+                <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                  User can edit this field
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="flex-col items-start gap-0.5 py-2"
+                onClick={() => onLockedChange?.(true)}
+              >
+                <div className="flex items-center gap-2">
+                  <Lock size={13} className={locked ? 'text-brand' : 'text-foreground-muted'} />
+                  <span
+                    className={cn('text-xs font-medium', locked ? 'text-brand' : 'text-foreground')}
+                  >
+                    Locked
+                  </span>
+                </div>
+                <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                  User sees this field as read-only
+                </span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </InputGroupAddon>
+
+        <InputGroupInput
+          id={id}
+          readOnly={locked}
+          value={value}
+          onChange={(e) => onValueChange?.(e.target.value)}
+          placeholder={FIELD_PLACEHOLDER[mode]}
+          className={mode === 'expression' ? 'font-mono' : undefined}
+        />
+
+        <InputGroupAddon align="inline-end">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <InputGroupButton icon size="3xs" aria-label="Choose value type">
+                <Type />
+              </InputGroupButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <DropdownMenuItem
+                className="flex-col items-start gap-0.5 py-2"
+                onClick={() => onModeChange?.('fixed')}
+              >
+                <div className="flex items-center gap-2">
+                  <Type
+                    size={13}
+                    className={mode === 'fixed' ? 'text-brand' : 'text-foreground-muted'}
+                  />
+                  <span
+                    className={cn(
+                      'text-xs font-medium',
+                      mode === 'fixed' ? 'text-brand' : 'text-foreground'
+                    )}
+                  >
+                    Fixed value
+                  </span>
+                </div>
+                <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                  Use a literal string value
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="flex-col items-start gap-0.5 py-2"
+                onClick={() => onModeChange?.('expression')}
+              >
+                <div className="flex items-center gap-2">
+                  <Code2
+                    size={13}
+                    className={mode === 'expression' ? 'text-brand' : 'text-foreground-muted'}
+                  />
+                  <span
+                    className={cn(
+                      'text-xs font-medium',
+                      mode === 'expression' ? 'text-brand' : 'text-foreground'
+                    )}
+                  >
+                    Expression
+                  </span>
+                </div>
+                <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                  Use a JS expression
+                </span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
index 135f03d9a..65481dd1e 100644
--- a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
@@ -1,9 +1,28 @@
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import type { EditorProps } from '@monaco-editor/react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { FormSchema } from '@uipath/apollo-wind';
 import {
   Badge,
   Button,
+  Card,
+  CardContent,
   cn,
   DropdownMenu,
   DropdownMenuContent,
@@ -12,12 +31,21 @@ import {
   DropdownMenuTrigger,
   Input,
   MetadataForm,
+  MultiSelect,
   ScrollableTabsList,
+  Search as SearchInput,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Switch,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  ToggleGroup,
+  ToggleGroupItem,
 } from '@uipath/apollo-wind';
 import {
   apolloCoreDarkHCMonaco,
@@ -37,19 +65,22 @@ import {
   CircleOff,
   Code2,
   Copy,
+  FileBracesCorner,
   GitFork,
   Globe,
   GripVertical,
   Play,
   Plus,
   Search,
-  FileBracesCorner,
   Sparkles,
   Type,
+  UserRoundCheck,
   X,
 } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
-import { Suspense, lazy, useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import type { LockableValueFieldMode } from './LockableValueField';
+import { LockableValueField } from './LockableValueField';
 import { NodePropertyPanel } from './NodePropertyPanel';
 
 // @monaco-editor/react uses a CJS build without an `exports` field, which
@@ -2468,6 +2499,319 @@ function InputOutputStory() {
   );
 }
 
+// ============================================================================
+// Prototype — LockableValueField
+// ============================================================================
+
+interface LockableCase {
+  id: number;
+  title: string;
+  required: boolean;
+  value: string;
+  locked: boolean;
+  mode: LockableValueFieldMode;
+}
+
+const DEFAULT_LOCKABLE_CASES: LockableCase[] = [
+  { id: 1, title: 'Invoice Number', required: true, value: '', locked: true, mode: 'fixed' },
+  { id: 2, title: 'Submission Date', required: true, value: '', locked: true, mode: 'fixed' },
+  { id: 3, title: 'Approved Amount', required: true, value: '', locked: true, mode: 'fixed' },
+];
+
+function LockableCaseRow({
+  id,
+  caseTitle,
+  onTitleChange,
+  required,
+  onDelete,
+  value,
+  onValueChange,
+  locked,
+  onLockedChange,
+  mode,
+  onModeChange,
+}: {
+  id: number;
+  caseTitle: string;
+  onTitleChange: (title: string) => void;
+  required: boolean;
+  onDelete: () => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  locked: boolean;
+  onLockedChange: (locked: boolean) => void;
+  mode: LockableValueFieldMode;
+  onModeChange: (mode: LockableValueFieldMode) => void;
+}) {
+  const [editingTitle, setEditingTitle] = useState(false);
+  const titleRef = useRef<HTMLInputElement>(null);
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn('group', isDragging && 'opacity-50')}
+    >
+      <LockableValueField
+        id={`return-value-${id}`}
+        label={
+          <div className="flex min-w-0 flex-1 items-center gap-1">
+            <button
+              type="button"
+              {...attributes}
+              {...listeners}
+              aria-label="Drag to reorder"
+              title="Drag to reorder"
+              className="grid size-5 shrink-0 touch-none place-items-center rounded text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground [cursor:grab]"
+            >
+              <GripVertical size={12} />
+            </button>
+            {editingTitle ? (
+              <input
+                ref={titleRef}
+                value={caseTitle}
+                onChange={(e) => onTitleChange(e.target.value)}
+                onBlur={() => setEditingTitle(false)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === 'Escape') setEditingTitle(false);
+                }}
+                className="min-w-0 flex-1 rounded bg-surface-overlay px-1 py-0.5 text-xs font-medium text-foreground outline-none ring-1 ring-brand"
+                autoFocus
+              />
+            ) : (
+              <button
+                type="button"
+                onClick={() => {
+                  setEditingTitle(true);
+                  setTimeout(() => titleRef.current?.select(), 0);
+                }}
+                className="truncate rounded px-1 py-0.5 text-left text-xs font-medium text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground"
+              >
+                {caseTitle}
+                {required && <span className="ml-0.5 text-destructive">*</span>}
+              </button>
+            )}
+          </div>
+        }
+        headerActions={
+          <button
+            type="button"
+            onClick={onDelete}
+            aria-label="Delete field"
+            title="Delete field"
+            className="grid size-6 shrink-0 place-items-center rounded text-foreground-subtle opacity-0 transition hover:bg-surface-overlay hover:text-foreground group-hover:opacity-100"
+          >
+            <X size={12} />
+          </button>
+        }
+        value={value}
+        onValueChange={onValueChange}
+        locked={locked}
+        onLockedChange={onLockedChange}
+        mode={mode}
+        onModeChange={onModeChange}
+      />
+    </div>
+  );
+}
+
+const DELIVERY_CHANNEL_OPTIONS = [
+  { label: 'Slack', value: 'slack' },
+  { label: 'Email', value: 'email' },
+  { label: 'Action Center', value: 'action-center' },
+  { label: 'Microsoft Teams', value: 'teams' },
+];
+
+const ASSIGNMENT_GROUP_OPTIONS = [
+  { label: 'All users of group', value: 'all' },
+  { label: 'Specific user', value: 'specific' },
+  { label: 'Group manager', value: 'manager' },
+];
+
+function LockableValueFieldStory() {
+  const [cases, setCases] = useState<LockableCase[]>(DEFAULT_LOCKABLE_CASES);
+  const nextIdRef = useRef(4);
+  const [deliveryChannels, setDeliveryChannels] = useState<string[]>([]);
+  const [assignmentSearch, setAssignmentSearch] = useState('');
+  const [assignmentGroup, setAssignmentGroup] = useState('all');
+  const [formView, setFormView] = useState<'ui' | 'json'>('ui');
+
+  const addCase = () => {
+    const id = nextIdRef.current++;
+    setCases((prev) => [
+      ...prev,
+      { id, title: `Field ${id}`, required: true, value: '', locked: true, mode: 'fixed' },
+    ]);
+  };
+  const deleteCase = (id: number) => setCases((prev) => prev.filter((c) => c.id !== id));
+  const updateCase = (id: number, patch: Partial<LockableCase>) =>
+    setCases((prev) => prev.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 3 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setCases((prev) => {
+      const oldIndex = prev.findIndex((c) => c.id === active.id);
+      const newIndex = prev.findIndex((c) => c.id === over.id);
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  };
+
+  return (
+    <PanelFrame>
+      <NodePropertyPanel
+        panelTitle="Properties"
+        nodeIcon={<UserRoundCheck />}
+        nodeLabel="Quick Approve"
+        nodeCategory="Quick approve/reject decision for the extracted invoice."
+        action={<DebugButton />}
+        onClose={() => {}}
+        contentInset="0.875rem"
+        className="h-[760px]"
+      >
+        <Tabs defaultValue="parameters" className="flex min-h-0 flex-1 flex-col">
+          <div className="shrink-0 pt-3 [padding-inline:var(--mf-content-inset,0.875rem)]">
+            <TabsList className={TAB_LIST_CLASS}>
+              <TabsTrigger value="parameters" className={TAB_TRIGGER_CLASS}>
+                Parameters
+              </TabsTrigger>
+              <TabsTrigger value="error-handling" className={TAB_TRIGGER_CLASS}>
+                Error handling
+              </TabsTrigger>
+              <TabsTrigger value="advanced" className={TAB_TRIGGER_CLASS}>
+                Advanced
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent
+            value="parameters"
+            className="mt-0 flex min-h-0 flex-1 flex-col gap-4 overflow-auto py-3 [padding-inline:var(--mf-content-inset,0.875rem)]"
+          >
+            {/* Delivery channel */}
+            <div className="flex flex-col gap-1.5">
+              <span className="text-xs font-medium text-foreground-muted">Delivery channel</span>
+              <MultiSelect
+                options={DELIVERY_CHANNEL_OPTIONS}
+                selected={deliveryChannels}
+                onChange={setDeliveryChannels}
+                placeholder="Select channels..."
+              />
+              <span className="text-[11px] leading-4 text-foreground-subtle">
+                Quick approve/reject decision for the extracted invoice.
+              </span>
+            </div>
+
+            {/* Assignment criteria */}
+            <div className="flex flex-col gap-1.5">
+              <span className="text-xs font-medium text-foreground-muted">Assignment criteria</span>
+              <div className="flex gap-2">
+                <SearchInput
+                  className="flex-1"
+                  placeholder="Search group"
+                  value={assignmentSearch}
+                  onChange={setAssignmentSearch}
+                />
+                <Select value={assignmentGroup} onValueChange={setAssignmentGroup}>
+                  <SelectTrigger className="flex-1">
+                    <SelectValue placeholder="All users of group" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ASSIGNMENT_GROUP_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/* Quick form */}
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-foreground-muted">Quick form</span>
+                <ToggleGroup
+                  type="single"
+                  size="xs"
+                  value={formView}
+                  onValueChange={(v) => v && setFormView(v as 'ui' | 'json')}
+                >
+                  <ToggleGroupItem value="ui">UI</ToggleGroupItem>
+                  <ToggleGroupItem value="json">JSON</ToggleGroupItem>
+                </ToggleGroup>
+              </div>
+              <Card>
+                <CardContent className="flex flex-col gap-4 p-4">
+                  {formView === 'ui' ? (
+                    <>
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleDragEnd}
+                      >
+                        <SortableContext
+                          items={cases.map((c) => c.id)}
+                          strategy={verticalListSortingStrategy}
+                        >
+                          <div className="flex flex-col gap-4">
+                            {cases.map((c) => (
+                              <LockableCaseRow
+                                key={c.id}
+                                id={c.id}
+                                caseTitle={c.title}
+                                onTitleChange={(title) => updateCase(c.id, { title })}
+                                required={c.required}
+                                onDelete={() => deleteCase(c.id)}
+                                value={c.value}
+                                onValueChange={(value) => updateCase(c.id, { value })}
+                                locked={c.locked}
+                                onLockedChange={(locked) => updateCase(c.id, { locked })}
+                                mode={c.mode}
+                                onModeChange={(mode) => updateCase(c.id, { mode })}
+                              />
+                            ))}
+                          </div>
+                        </SortableContext>
+                      </DndContext>
+                      <button
+                        type="button"
+                        onClick={addCase}
+                        className="flex cursor-pointer items-center gap-1.5 text-xs text-brand transition hover:text-brand-hover"
+                      >
+                        <Plus size={12} />
+                        Add case
+                      </button>
+                    </>
+                  ) : (
+                    <pre className="overflow-auto whitespace-pre-wrap text-xs text-foreground-muted">
+                      {JSON.stringify(cases, null, 2)}
+                    </pre>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+          </TabsContent>
+          <TabsContent value="error-handling" className="mt-0" />
+          <TabsContent value="advanced" className="mt-0" />
+        </Tabs>
+      </NodePropertyPanel>
+    </PanelFrame>
+  );
+}
+
+export const LockableField: Story = {
+  name: 'Lockable Field',
+  render: () => <LockableValueFieldStory />,
+};
+
 export const Output: Story = {
   name: 'Input / Output',
   render: () => <InputOutputStory />,
diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts b/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts
index f2b1ddccd..d83f76c1b 100644
--- a/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts
@@ -1,4 +1,6 @@
 export type { ExpressionFieldProps, ExpressionMode } from './ExpressionField';
 export { ExpressionField } from './ExpressionField';
+export type { LockableValueFieldMode, LockableValueFieldProps } from './LockableValueField';
+export { LockableValueField } from './LockableValueField';
 export { NodePropertyPanel } from './NodePropertyPanel';
 export type { NodePropertyPanelProps } from './NodePropertyPanel.types';

From e8f19240479b54d0fc594e776a5a8559dbc5d5a8 Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Wed, 8 Jul 2026 12:02:57 -0700
Subject: [PATCH 2/3] fix(apollo-wind): scan apollo-react sources for
 Storybook's Tailwind build

Storybook imports apollo-wind's tailwind.css directly as its Tailwind
entry point, including for apollo-react's canvas stories, but the
@source glob only covered apollo-wind's own files. Utility classes
unique to apollo-react (e.g. container-query variants) silently
produced no CSS since they were never scanned.

Also pins @tailwindcss/vite to an exact version already cleared by the
pnpm minimumReleaseAge policy, keeping it aligned with the tailwindcss
core version resolved elsewhere in the workspace.
---
 apps/storybook/package.json                  |   2 +-
 packages/apollo-wind/src/styles/tailwind.css |   9 +-
 pnpm-lock.yaml                               | 171 +------------------
 3 files changed, 17 insertions(+), 165 deletions(-)

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 72c469a4d..a3b824133 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -31,7 +31,7 @@
     "@storybook/icons": "^2.0.1",
     "@storybook/react": "^10.4.1",
     "@storybook/react-vite": "^10.4.1",
-    "@tailwindcss/vite": "^4.2.2",
+    "@tailwindcss/vite": "4.3.0",
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.2.0",
diff --git a/packages/apollo-wind/src/styles/tailwind.css b/packages/apollo-wind/src/styles/tailwind.css
index cb1e207db..67d5aed02 100644
--- a/packages/apollo-wind/src/styles/tailwind.css
+++ b/packages/apollo-wind/src/styles/tailwind.css
@@ -10,4 +10,11 @@
 
 @import "./tailwind.consumer.css";
 
-@source "../**/*.{js,jsx,ts,tsx}";
\ No newline at end of file
+@source "../**/*.{js,jsx,ts,tsx}";
+
+/* Storybook (apps/storybook/.storybook/preview.tsx) imports this file
+ * directly, making it the Tailwind entry point for the whole app — including
+ * apollo-react's canvas stories. Without this, utility classes unique to
+ * apollo-react (not already used somewhere in apollo-wind) silently produce
+ * no CSS, since they'd never be scanned otherwise. */
+@source "../../../apollo-react/src/**/*.{js,jsx,ts,tsx}";
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c7daff635..b6f078db7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -499,8 +499,8 @@ importers:
         specifier: ^10.4.1
         version: 10.4.2(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(esbuild@0.28.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@10.4.2(@testing-library/dom@10.4.1)(@types/react@19.2.8)(prettier@3.8.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)(vite@8.0.16(@types/node@24.10.1)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.22.4)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.28.1))
       '@tailwindcss/vite':
-        specifier: ^4.2.2
-        version: 4.2.2(vite@8.0.16(@types/node@24.10.1)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.22.4)(yaml@2.8.3))
+        specifier: 4.3.0
+        version: 4.3.0(vite@8.0.16(@types/node@24.10.1)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.22.4)(yaml@2.8.3))
       '@types/react':
         specifier: ^19.2.6
         version: 19.2.8
@@ -5637,9 +5637,6 @@ packages:
   '@tailwindcss/node@4.1.17':
     resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
 
-  '@tailwindcss/node@4.2.2':
-    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
-
   '@tailwindcss/node@4.3.0':
     resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
 
@@ -5649,12 +5646,6 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-android-arm64@4.2.2':
-    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [android]
-
   '@tailwindcss/oxide-android-arm64@4.3.0':
     resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
     engines: {node: '>= 20'}
@@ -5667,12 +5658,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-arm64@4.2.2':
-    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@tailwindcss/oxide-darwin-arm64@4.3.0':
     resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
     engines: {node: '>= 20'}
@@ -5685,12 +5670,6 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.2.2':
-    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [darwin]
-
   '@tailwindcss/oxide-darwin-x64@4.3.0':
     resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
     engines: {node: '>= 20'}
@@ -5703,12 +5682,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-freebsd-x64@4.2.2':
-    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@tailwindcss/oxide-freebsd-x64@4.3.0':
     resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
     engines: {node: '>= 20'}
@@ -5721,12 +5694,6 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
-    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm]
-    os: [linux]
-
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
     resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
     engines: {node: '>= 20'}
@@ -5740,13 +5707,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
-    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
     resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
     engines: {node: '>= 20'}
@@ -5761,13 +5721,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
-    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
     engines: {node: '>= 20'}
@@ -5782,13 +5735,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
-    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
     engines: {node: '>= 20'}
@@ -5803,13 +5749,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
-    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
     engines: {node: '>= 20'}
@@ -5829,18 +5768,6 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
-    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
   '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
     engines: {node: '>=14.0.0'}
@@ -5859,12 +5786,6 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
-    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [win32]
-
   '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
     resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
     engines: {node: '>= 20'}
@@ -5877,12 +5798,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
-    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [win32]
-
   '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
     resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
     engines: {node: '>= 20'}
@@ -5893,10 +5808,6 @@ packages:
     resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
     engines: {node: '>= 10'}
 
-  '@tailwindcss/oxide@4.2.2':
-    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
-    engines: {node: '>= 20'}
-
   '@tailwindcss/oxide@4.3.0':
     resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
     engines: {node: '>= 20'}
@@ -5904,8 +5815,8 @@ packages:
   '@tailwindcss/postcss@4.3.0':
     resolution: {integrity: sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==}
 
-  '@tailwindcss/vite@4.2.2':
-    resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==}
+  '@tailwindcss/vite@4.3.0':
+    resolution: {integrity: sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==}
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
@@ -12264,9 +12175,6 @@ packages:
   tailwindcss@4.1.17:
     resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
 
-  tailwindcss@4.2.2:
-    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
-
   tailwindcss@4.3.0:
     resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
 
@@ -17772,16 +17680,6 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.1.17
 
-  '@tailwindcss/node@4.2.2':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.20.0
-      jiti: 2.6.1
-      lightningcss: 1.32.0
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.2.2
-
   '@tailwindcss/node@4.3.0':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -17795,108 +17693,72 @@ snapshots:
   '@tailwindcss/oxide-android-arm64@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-android-arm64@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-android-arm64@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-darwin-arm64@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-darwin-arm64@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-darwin-x64@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-darwin-x64@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-freebsd-x64@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-freebsd-x64@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
     optional: true
 
   '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
-    optional: true
-
   '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
     optional: true
 
@@ -17915,21 +17777,6 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
 
-  '@tailwindcss/oxide@4.2.2':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.2.2
-      '@tailwindcss/oxide-darwin-arm64': 4.2.2
-      '@tailwindcss/oxide-darwin-x64': 4.2.2
-      '@tailwindcss/oxide-freebsd-x64': 4.2.2
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
-      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
-      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
-      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
-      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
-      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
-
   '@tailwindcss/oxide@4.3.0':
     optionalDependencies:
       '@tailwindcss/oxide-android-arm64': 4.3.0
@@ -17953,11 +17800,11 @@ snapshots:
       postcss: 8.5.15
       tailwindcss: 4.3.0
 
-  '@tailwindcss/vite@4.2.2(vite@8.0.16(@types/node@24.10.1)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.22.4)(yaml@2.8.3))':
+  '@tailwindcss/vite@4.3.0(vite@8.0.16(@types/node@24.10.1)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.22.4)(yaml@2.8.3))':
     dependencies:
-      '@tailwindcss/node': 4.2.2
-      '@tailwindcss/oxide': 4.2.2
-      tailwindcss: 4.2.2
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      tailwindcss: 4.3.0
       vite: 8.0.16(@types/node@24.10.1)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.22.4)(yaml@2.8.3)
 
   '@tanstack/ai-client@0.8.0':
@@ -25541,8 +25388,6 @@ snapshots:
 
   tailwindcss@4.1.17: {}
 
-  tailwindcss@4.2.2: {}
-
   tailwindcss@4.3.0: {}
 
   tapable@2.3.0: {}

From 2604a3ce102ffc597fe3ca859f5a2bdef6040b2e Mon Sep 17 00:00:00 2001
From: David Anthony <dba@hey.com>
Date: Wed, 8 Jul 2026 12:03:13 -0700
Subject: [PATCH 3/3] feat(apollo-react): flesh out LockableValueField Quick
 Approve prototype

Iterates the HITL "Quick Approve" panel prototype for coworker
feedback:

- Field-type switching (string, integer, date, boolean, single/multi
  select, file) with per-type value controls and Fixed/Expression
  copy.
- Responsive header: field-type/AI-assist/insert-variable controls
  collapse to icon-only in narrow containers, plus a `compact` prop to
  force that layout for side-by-side comparison.
- Real tooltips on the icon-only header controls instead of native
  title attributes.
- Edit/Preview/JSON toggle for the Quick Form card, restyled to
  borderless square icon buttons matching the compact header controls.
- Showcase panel documenting the component with live Full view /
  Compact view examples.
---
 .../NodePropertyPanel/LockableValueField.tsx  | 567 +++++++++++----
 .../NodePropertyPanel.stories.tsx             | 647 +++++++++++++-----
 .../components/NodePropertyPanel/index.ts     |  13 +-
 3 files changed, 944 insertions(+), 283 deletions(-)

diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx b/packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx
index a5c3b69fd..08a91d035 100644
--- a/packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/LockableValueField.tsx
@@ -1,28 +1,149 @@
 import {
   Button,
+  Calendar,
   cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  FileUpload,
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
   Label,
+  MultiSelect,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
   Textarea,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
 } from '@uipath/apollo-wind';
-import { ChevronDown, Code2, Lock, LockOpen, Sparkles, Type } from 'lucide-react';
+import {
+  Calendar as CalendarIcon,
+  ChevronDown,
+  Code2,
+  Hash,
+  List,
+  ListChecks,
+  Lock,
+  LockOpen,
+  type LucideIcon,
+  Paperclip,
+  Sparkles,
+  ToggleLeft,
+  Type,
+} from 'lucide-react';
 import type { ReactNode } from 'react';
 import { useId } from 'react';
 
 export type LockableValueFieldMode = 'fixed' | 'expression';
 
+export type LockableFieldType =
+  | 'string'
+  | 'integer'
+  | 'date'
+  | 'boolean'
+  | 'single-select'
+  | 'multi-select'
+  | 'file';
+
+interface FieldTypeMeta {
+  label: string;
+  icon: LucideIcon;
+  supportsExpression: boolean;
+  fixedLabel: string;
+  fixedDescription: string;
+}
+
+export const FIELD_TYPE_META: Record<LockableFieldType, FieldTypeMeta> = {
+  string: {
+    label: 'String',
+    icon: Type,
+    supportsExpression: true,
+    fixedLabel: 'Fixed value',
+    fixedDescription: 'Use a literal string value',
+  },
+  integer: {
+    label: 'Integer',
+    icon: Hash,
+    supportsExpression: true,
+    fixedLabel: 'Fixed value',
+    fixedDescription: 'Use a literal number value',
+  },
+  date: {
+    label: 'Date',
+    icon: CalendarIcon,
+    supportsExpression: true,
+    fixedLabel: 'Fixed date',
+    fixedDescription: 'Use a literal date value',
+  },
+  boolean: {
+    label: 'Boolean',
+    icon: ToggleLeft,
+    supportsExpression: true,
+    fixedLabel: 'Fixed value',
+    fixedDescription: 'Use a literal true or false value',
+  },
+  'single-select': {
+    label: 'Single select',
+    icon: List,
+    supportsExpression: false,
+    fixedLabel: 'Fixed value',
+    fixedDescription: 'Choose one option',
+  },
+  'multi-select': {
+    label: 'Multiselect',
+    icon: ListChecks,
+    supportsExpression: false,
+    fixedLabel: 'Fixed value',
+    fixedDescription: 'Choose one or more options',
+  },
+  file: {
+    label: 'File',
+    icon: Paperclip,
+    supportsExpression: false,
+    fixedLabel: 'Fixed value',
+    fixedDescription: 'Upload a file',
+  },
+};
+
+const FIELD_TYPE_ORDER: LockableFieldType[] = [
+  'string',
+  'integer',
+  'date',
+  'boolean',
+  'single-select',
+  'multi-select',
+  'file',
+];
+
+export const DEMO_SELECT_OPTIONS = [
+  { label: 'Option 1', value: 'option-1' },
+  { label: 'Option 2', value: 'option-2' },
+  { label: 'Option 3', value: 'option-3' },
+];
+
+export function parseListValue(value: string): string[] {
+  try {
+    const parsed = JSON.parse(value);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
 export interface LockableValueFieldProps {
-  /** Current field value. */
+  /** Current field value. Encoding depends on fieldType (e.g. multi-select is a JSON array string). */
   value?: string;
   /** Called when the user edits the value (only fires while unlocked). */
   onValueChange?: (value: string) => void;
@@ -30,16 +151,22 @@ export interface LockableValueFieldProps {
   locked?: boolean;
   /** Called when the user toggles the lock. */
   onLockedChange?: (locked: boolean) => void;
-  /** Fixed value vs. JS expression. Defaults to 'fixed'. */
+  /** Fixed value vs. JS expression. Defaults to 'fixed'. Ignored for types that don't support expressions. */
   mode?: LockableValueFieldMode;
   /** Called when the user switches modes. */
   onModeChange?: (mode: LockableValueFieldMode) => void;
+  /** The field's data type. Defaults to 'string'. Determines which control renders the value. */
+  fieldType?: LockableFieldType;
+  /** Called when the user switches the field type. */
+  onFieldTypeChange?: (fieldType: LockableFieldType) => void;
   /** Shows a required-field asterisk next to the default label. Ignored when `label` is provided. */
   required?: boolean;
   /** Overrides the default mode-based label (e.g. a field name instead of "String value"). */
   label?: ReactNode;
   /** Extra content rendered after the built-in AI assist / Insert variable buttons (e.g. a delete button). */
   headerActions?: ReactNode;
+  /** Forces the header row into its narrow-container icon-only layout, regardless of actual width. For demos/comparisons. */
+  compact?: boolean;
   id?: string;
   className?: string;
 }
@@ -55,12 +182,14 @@ const FIELD_PLACEHOLDER: Record<LockableValueFieldMode, string> = {
 };
 
 /**
- * LockableValueField — a string field that can be locked to read-only and
- * switched between a literal value and a JS expression.
+ * LockableValueField — a field that can be locked to read-only, typed as one
+ * of several data types, and (for scalar types) switched between a literal
+ * value and a JS expression.
  *
  * Prototype: the expression mode is styled as code (monospace) but does not
  * yet carry real syntax highlighting or evaluation. See ExpressionField for
- * the direction a full code-editing surface would take.
+ * the direction a full code-editing surface would take. Select/multiselect
+ * options are demo placeholders; file uploads aren't persisted anywhere.
  */
 export function LockableValueField({
   value = '',
@@ -69,16 +198,23 @@ export function LockableValueField({
   onLockedChange,
   mode = 'fixed',
   onModeChange,
+  fieldType = 'string',
+  onFieldTypeChange,
   required,
   label,
   headerActions,
+  compact,
   id,
   className,
 }: LockableValueFieldProps) {
   const promptId = useId();
+  const typeMeta = FIELD_TYPE_META[fieldType];
+  const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
+  const collapsedTextClass = cn('@max-[259px]:hidden', compact && '!hidden');
+  const collapsedPaddingClass = cn('@max-[259px]:px-1.5', compact && '!px-1.5');
 
   return (
-    <div className={cn('flex flex-col gap-1.5', className)}>
+    <div className={cn('@container flex flex-col gap-1.5', className)}>
       <div className="flex items-center gap-1">
         {label ?? (
           <Label htmlFor={id} className="text-xs font-medium text-foreground-muted">
@@ -86,54 +222,280 @@ export function LockableValueField({
             {required && <span className="ml-0.5 text-destructive">*</span>}
           </Label>
         )}
-        <div className="ml-auto flex items-center gap-0.5">
-          <Popover>
-            <PopoverTrigger asChild>
-              <button
-                type="button"
-                aria-label="AI assist"
-                title="AI assist"
-                className="grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
-              >
-                <Sparkles size={12} />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent align="end" className="space-y-3">
-              <div className="space-y-1.5">
-                <Label htmlFor={promptId} className="text-xs font-medium text-foreground-muted">
-                  Describe what you want
-                </Label>
-                <Textarea
-                  id={promptId}
-                  rows={3}
-                  placeholder="Display a value from the previous step"
-                  className="resize-none text-sm"
-                />
-              </div>
-              <span className="block text-[11px] text-foreground-subtle">
-                Output: String expression
-              </span>
-              <Button size="sm" className="w-full">
-                Generate
-              </Button>
-            </PopoverContent>
-          </Popover>
-          <button
-            type="button"
-            aria-label="Insert variable"
-            title="Insert variable"
-            className="flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
-          >
-            <span className="font-mono text-[10px]">{'{x}'}</span>
-            <span>Insert</span>
-            <ChevronDown size={9} />
-          </button>
-          {headerActions}
-        </div>
+        <TooltipProvider delayDuration={300}>
+          <div className="ml-auto flex items-center gap-0.5">
+            {onFieldTypeChange && (
+              <DropdownMenu>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type="button"
+                        aria-label="Field type"
+                        className={cn(
+                          'flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground',
+                          collapsedPaddingClass
+                        )}
+                      >
+                        <typeMeta.icon size={12} />
+                        <span className={collapsedTextClass}>{typeMeta.label}</span>
+                        <ChevronDown size={9} className={collapsedTextClass} />
+                      </button>
+                    </DropdownMenuTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>Change field type</TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent align="end" className="w-44">
+                  {FIELD_TYPE_ORDER.map((type) => {
+                    const meta = FIELD_TYPE_META[type];
+                    const isActive = type === fieldType;
+                    return (
+                      <DropdownMenuItem key={type} onClick={() => onFieldTypeChange(type)}>
+                        <meta.icon className={isActive ? 'text-brand' : 'text-foreground-muted'} />
+                        <span className={cn(isActive && 'font-medium text-brand')}>
+                          {meta.label}
+                        </span>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+            <Popover>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label="AI assist"
+                      className="grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground"
+                    >
+                      <Sparkles size={12} />
+                    </button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent>Generate a value with AI</TooltipContent>
+              </Tooltip>
+              <PopoverContent align="end" className="space-y-3">
+                <div className="space-y-1.5">
+                  <Label htmlFor={promptId} className="text-xs font-medium text-foreground-muted">
+                    Describe what you want
+                  </Label>
+                  <Textarea
+                    id={promptId}
+                    rows={3}
+                    placeholder="Display a value from the previous step"
+                    className="resize-none text-sm"
+                  />
+                </div>
+                <span className="block text-[11px] text-foreground-subtle">
+                  Output: String expression
+                </span>
+                <Button size="sm" className="w-full">
+                  Generate
+                </Button>
+              </PopoverContent>
+            </Popover>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="Insert variable"
+                  className={cn(
+                    'flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground',
+                    collapsedPaddingClass
+                  )}
+                >
+                  <span className="font-mono text-[10px]">{'{x}'}</span>
+                  <span className={collapsedTextClass}>Insert</span>
+                  <ChevronDown size={9} className={collapsedTextClass} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Insert a variable from a previous step</TooltipContent>
+            </Tooltip>
+            {headerActions}
+          </div>
+        </TooltipProvider>
       </div>
 
-      <InputGroup>
-        <InputGroupAddon align="inline-start">
+      {typeMeta.supportsExpression ? (
+        <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <InputGroupButton
+                  icon
+                  size="3xs"
+                  aria-label={locked ? 'Locked. Click to unlock.' : 'Unlocked. Click to lock.'}
+                >
+                  {locked ? <Lock /> : <LockOpen />}
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-56">
+                <DropdownMenuItem
+                  className="flex-col items-start gap-0.5 py-2"
+                  onClick={() => onLockedChange?.(false)}
+                >
+                  <div className="flex items-center gap-2">
+                    <LockOpen
+                      size={13}
+                      className={!locked ? 'text-brand' : 'text-foreground-muted'}
+                    />
+                    <span
+                      className={cn(
+                        'text-xs font-medium',
+                        !locked ? 'text-brand' : 'text-foreground'
+                      )}
+                    >
+                      Unlocked
+                    </span>
+                  </div>
+                  <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                    User can edit this field
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="flex-col items-start gap-0.5 py-2"
+                  onClick={() => onLockedChange?.(true)}
+                >
+                  <div className="flex items-center gap-2">
+                    <Lock size={13} className={locked ? 'text-brand' : 'text-foreground-muted'} />
+                    <span
+                      className={cn(
+                        'text-xs font-medium',
+                        locked ? 'text-brand' : 'text-foreground'
+                      )}
+                    >
+                      Locked
+                    </span>
+                  </div>
+                  <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                    User sees this field as read-only
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+
+          {effectiveMode === 'expression' ? (
+            <InputGroupInput
+              id={id}
+              readOnly={locked}
+              value={value}
+              onChange={(e) => onValueChange?.(e.target.value)}
+              placeholder={FIELD_PLACEHOLDER.expression}
+              className="font-mono"
+            />
+          ) : fieldType === 'boolean' ? (
+            <div className="flex h-full flex-1 items-center px-3">
+              <Switch
+                id={id}
+                checked={value === 'true'}
+                onCheckedChange={(checked) => onValueChange?.(String(checked))}
+                disabled={locked}
+              />
+            </div>
+          ) : fieldType === 'date' ? (
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  id={id}
+                  data-slot="input-group-control"
+                  disabled={locked}
+                  className="flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {value ? (
+                    new Date(value).toLocaleDateString(undefined, {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })
+                  ) : (
+                    <span className="text-muted-foreground">Pick a date</span>
+                  )}
+                </button>
+              </PopoverTrigger>
+              <PopoverContent align="start" className="w-auto p-0">
+                <Calendar
+                  mode="single"
+                  selected={value ? new Date(value) : undefined}
+                  onSelect={(date) => onValueChange?.(date ? date.toISOString() : '')}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <InputGroupInput
+              id={id}
+              type={fieldType === 'integer' ? 'number' : 'text'}
+              readOnly={locked}
+              value={value}
+              onChange={(e) => onValueChange?.(e.target.value)}
+              placeholder={FIELD_PLACEHOLDER.fixed}
+            />
+          )}
+
+          <InputGroupAddon align="inline-end">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <InputGroupButton icon size="3xs" aria-label="Choose value type">
+                  <typeMeta.icon />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuItem
+                  className="flex-col items-start gap-0.5 py-2"
+                  onClick={() => onModeChange?.('fixed')}
+                >
+                  <div className="flex items-center gap-2">
+                    <typeMeta.icon
+                      size={13}
+                      className={effectiveMode === 'fixed' ? 'text-brand' : 'text-foreground-muted'}
+                    />
+                    <span
+                      className={cn(
+                        'text-xs font-medium',
+                        effectiveMode === 'fixed' ? 'text-brand' : 'text-foreground'
+                      )}
+                    >
+                      {typeMeta.fixedLabel}
+                    </span>
+                  </div>
+                  <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                    {typeMeta.fixedDescription}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="flex-col items-start gap-0.5 py-2"
+                  onClick={() => onModeChange?.('expression')}
+                >
+                  <div className="flex items-center gap-2">
+                    <Code2
+                      size={13}
+                      className={
+                        effectiveMode === 'expression' ? 'text-brand' : 'text-foreground-muted'
+                      }
+                    />
+                    <span
+                      className={cn(
+                        'text-xs font-medium',
+                        effectiveMode === 'expression' ? 'text-brand' : 'text-foreground'
+                      )}
+                    >
+                      Expression
+                    </span>
+                  </div>
+                  <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
+                    Use a JS expression
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+        </InputGroup>
+      ) : (
+        <div className="flex items-center gap-2">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <InputGroupButton
@@ -185,73 +547,42 @@ export function LockableValueField({
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-        </InputGroupAddon>
 
-        <InputGroupInput
-          id={id}
-          readOnly={locked}
-          value={value}
-          onChange={(e) => onValueChange?.(e.target.value)}
-          placeholder={FIELD_PLACEHOLDER[mode]}
-          className={mode === 'expression' ? 'font-mono' : undefined}
-        />
+          {fieldType === 'single-select' && (
+            <Select value={value || undefined} onValueChange={onValueChange} disabled={locked}>
+              <SelectTrigger id={id} className="flex-1">
+                <SelectValue placeholder="Select an option" />
+              </SelectTrigger>
+              <SelectContent>
+                {DEMO_SELECT_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
 
-        <InputGroupAddon align="inline-end">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <InputGroupButton icon size="3xs" aria-label="Choose value type">
-                <Type />
-              </InputGroupButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              <DropdownMenuItem
-                className="flex-col items-start gap-0.5 py-2"
-                onClick={() => onModeChange?.('fixed')}
-              >
-                <div className="flex items-center gap-2">
-                  <Type
-                    size={13}
-                    className={mode === 'fixed' ? 'text-brand' : 'text-foreground-muted'}
-                  />
-                  <span
-                    className={cn(
-                      'text-xs font-medium',
-                      mode === 'fixed' ? 'text-brand' : 'text-foreground'
-                    )}
-                  >
-                    Fixed value
-                  </span>
-                </div>
-                <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
-                  Use a literal string value
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="flex-col items-start gap-0.5 py-2"
-                onClick={() => onModeChange?.('expression')}
-              >
-                <div className="flex items-center gap-2">
-                  <Code2
-                    size={13}
-                    className={mode === 'expression' ? 'text-brand' : 'text-foreground-muted'}
-                  />
-                  <span
-                    className={cn(
-                      'text-xs font-medium',
-                      mode === 'expression' ? 'text-brand' : 'text-foreground'
-                    )}
-                  >
-                    Expression
-                  </span>
-                </div>
-                <span className="pl-[21px] text-[11px] leading-4 text-foreground-subtle">
-                  Use a JS expression
-                </span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupAddon>
-      </InputGroup>
+          {fieldType === 'multi-select' && (
+            <MultiSelect
+              className="flex-1"
+              options={DEMO_SELECT_OPTIONS}
+              selected={parseListValue(value)}
+              onChange={(selected) => onValueChange?.(JSON.stringify(selected))}
+              placeholder="Select options..."
+              disabled={locked}
+            />
+          )}
+
+          {fieldType === 'file' && (
+            <FileUpload
+              className="flex-1"
+              disabled={locked}
+              onFilesChange={(files) => onValueChange?.(files.map((f) => f.name).join(', '))}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
index 65481dd1e..2c8d5c966 100644
--- a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
@@ -24,16 +24,18 @@ import {
   Card,
   CardContent,
   cn,
+  DatePicker,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  FileUpload,
   Input,
+  Label,
   MetadataForm,
   MultiSelect,
   ScrollableTabsList,
-  Search as SearchInput,
   Select,
   SelectContent,
   SelectItem,
@@ -44,8 +46,13 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Textarea,
   ToggleGroup,
   ToggleGroupItem,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
 } from '@uipath/apollo-wind';
 import {
   apolloCoreDarkHCMonaco,
@@ -65,22 +72,30 @@ import {
   CircleOff,
   Code2,
   Copy,
+  Eye,
   FileBracesCorner,
   GitFork,
   Globe,
   GripVertical,
+  Pencil,
   Play,
   Plus,
   Search,
   Sparkles,
   Type,
+  Upload,
   UserRoundCheck,
   X,
 } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
 import { lazy, Suspense, useEffect, useRef, useState } from 'react';
-import type { LockableValueFieldMode } from './LockableValueField';
-import { LockableValueField } from './LockableValueField';
+import type { LockableFieldType, LockableValueFieldMode } from './LockableValueField';
+import {
+  DEMO_SELECT_OPTIONS,
+  FIELD_TYPE_META,
+  LockableValueField,
+  parseListValue,
+} from './LockableValueField';
 import { NodePropertyPanel } from './NodePropertyPanel';
 
 // @monaco-editor/react uses a CJS build without an `exports` field, which
@@ -2510,12 +2525,37 @@ interface LockableCase {
   value: string;
   locked: boolean;
   mode: LockableValueFieldMode;
+  fieldType: LockableFieldType;
 }
 
 const DEFAULT_LOCKABLE_CASES: LockableCase[] = [
-  { id: 1, title: 'Invoice Number', required: true, value: '', locked: true, mode: 'fixed' },
-  { id: 2, title: 'Submission Date', required: true, value: '', locked: true, mode: 'fixed' },
-  { id: 3, title: 'Approved Amount', required: true, value: '', locked: true, mode: 'fixed' },
+  {
+    id: 1,
+    title: 'Invoice Number',
+    required: true,
+    value: '',
+    locked: true,
+    mode: 'fixed',
+    fieldType: 'string',
+  },
+  {
+    id: 2,
+    title: 'Submission Date',
+    required: true,
+    value: '',
+    locked: true,
+    mode: 'fixed',
+    fieldType: 'date',
+  },
+  {
+    id: 3,
+    title: 'Approved Amount',
+    required: true,
+    value: '',
+    locked: true,
+    mode: 'fixed',
+    fieldType: 'integer',
+  },
 ];
 
 function LockableCaseRow({
@@ -2530,6 +2570,9 @@ function LockableCaseRow({
   onLockedChange,
   mode,
   onModeChange,
+  fieldType,
+  onFieldTypeChange,
+  compact,
 }: {
   id: number;
   caseTitle: string;
@@ -2542,6 +2585,9 @@ function LockableCaseRow({
   onLockedChange: (locked: boolean) => void;
   mode: LockableValueFieldMode;
   onModeChange: (mode: LockableValueFieldMode) => void;
+  fieldType: LockableFieldType;
+  onFieldTypeChange: (fieldType: LockableFieldType) => void;
+  compact?: boolean;
 }) {
   const [editingTitle, setEditingTitle] = useState(false);
   const titleRef = useRef<HTMLInputElement>(null);
@@ -2613,42 +2659,92 @@ function LockableCaseRow({
         onLockedChange={onLockedChange}
         mode={mode}
         onModeChange={onModeChange}
+        fieldType={fieldType}
+        onFieldTypeChange={onFieldTypeChange}
+        compact={compact}
       />
     </div>
   );
 }
 
-const DELIVERY_CHANNEL_OPTIONS = [
-  { label: 'Slack', value: 'slack' },
-  { label: 'Email', value: 'email' },
-  { label: 'Action Center', value: 'action-center' },
-  { label: 'Microsoft Teams', value: 'teams' },
-];
-
-const ASSIGNMENT_GROUP_OPTIONS = [
-  { label: 'All users of group', value: 'all' },
-  { label: 'Specific user', value: 'specific' },
-  { label: 'Group manager', value: 'manager' },
-];
-
-function LockableValueFieldStory() {
+function QuickFormStory() {
   const [cases, setCases] = useState<LockableCase[]>(DEFAULT_LOCKABLE_CASES);
   const nextIdRef = useRef(4);
-  const [deliveryChannels, setDeliveryChannels] = useState<string[]>([]);
-  const [assignmentSearch, setAssignmentSearch] = useState('');
-  const [assignmentGroup, setAssignmentGroup] = useState('all');
-  const [formView, setFormView] = useState<'ui' | 'json'>('ui');
+  const [formView, setFormView] = useState<'edit' | 'preview' | 'json'>('edit');
+  const [formTitle, setFormTitle] = useState('Quick Approve');
+  const [formDescription, setFormDescription] = useState('Add a description');
+  const [editingFormTitle, setEditingFormTitle] = useState(false);
+  const [editingFormDescription, setEditingFormDescription] = useState(false);
+  const formTitleRef = useRef<HTMLInputElement>(null);
+  const formDescriptionRef = useRef<HTMLInputElement>(null);
+  const [jsonDraft, setJsonDraft] = useState(() => JSON.stringify(DEFAULT_LOCKABLE_CASES, null, 2));
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const [showcaseValue, setShowcaseValue] = useState('');
+  const [showcaseLocked, setShowcaseLocked] = useState(true);
+  const [showcaseMode, setShowcaseMode] = useState<LockableValueFieldMode>('fixed');
+  const [showcaseFieldType, setShowcaseFieldType] = useState<LockableFieldType>('string');
+
+  const handleShowcaseFieldTypeChange = (type: LockableFieldType) => {
+    setShowcaseFieldType(type);
+    setShowcaseValue('');
+    if (!FIELD_TYPE_META[type].supportsExpression) {
+      setShowcaseMode('fixed');
+    }
+  };
+
+  useEffect(() => {
+    if (formView !== 'json') {
+      setJsonDraft(JSON.stringify(cases, null, 2));
+      setJsonError(null);
+    }
+  }, [cases, formView]);
+
+  const handleJsonChange = (value: string) => {
+    setJsonDraft(value);
+    try {
+      const parsed = JSON.parse(value);
+      if (!Array.isArray(parsed)) {
+        setJsonError('Expected a JSON array of fields.');
+        return;
+      }
+      setCases(parsed);
+      setJsonError(null);
+    } catch {
+      setJsonError('Invalid JSON.');
+    }
+  };
 
   const addCase = () => {
     const id = nextIdRef.current++;
     setCases((prev) => [
       ...prev,
-      { id, title: `Field ${id}`, required: true, value: '', locked: true, mode: 'fixed' },
+      {
+        id,
+        title: `Field ${id}`,
+        required: true,
+        value: '',
+        locked: true,
+        mode: 'fixed',
+        fieldType: 'string',
+      },
     ]);
   };
   const deleteCase = (id: number) => setCases((prev) => prev.filter((c) => c.id !== id));
   const updateCase = (id: number, patch: Partial<LockableCase>) =>
     setCases((prev) => prev.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+  const updateCaseFieldType = (id: number, fieldType: LockableFieldType) =>
+    setCases((prev) =>
+      prev.map((c) =>
+        c.id === id
+          ? {
+              ...c,
+              fieldType,
+              value: '',
+              mode: FIELD_TYPE_META[fieldType].supportsExpression ? c.mode : 'fixed',
+            }
+          : c
+      )
+    );
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 3 } }),
@@ -2666,150 +2762,375 @@ function LockableValueFieldStory() {
   };
 
   return (
-    <PanelFrame>
-      <NodePropertyPanel
-        panelTitle="Properties"
-        nodeIcon={<UserRoundCheck />}
-        nodeLabel="Quick Approve"
-        nodeCategory="Quick approve/reject decision for the extracted invoice."
-        action={<DebugButton />}
-        onClose={() => {}}
-        contentInset="0.875rem"
-        className="h-[760px]"
-      >
-        <Tabs defaultValue="parameters" className="flex min-h-0 flex-1 flex-col">
-          <div className="shrink-0 pt-3 [padding-inline:var(--mf-content-inset,0.875rem)]">
-            <TabsList className={TAB_LIST_CLASS}>
-              <TabsTrigger value="parameters" className={TAB_TRIGGER_CLASS}>
-                Parameters
-              </TabsTrigger>
-              <TabsTrigger value="error-handling" className={TAB_TRIGGER_CLASS}>
-                Error handling
-              </TabsTrigger>
-              <TabsTrigger value="advanced" className={TAB_TRIGGER_CLASS}>
-                Advanced
-              </TabsTrigger>
-            </TabsList>
-          </div>
-          <TabsContent
-            value="parameters"
-            className="mt-0 flex min-h-0 flex-1 flex-col gap-4 overflow-auto py-3 [padding-inline:var(--mf-content-inset,0.875rem)]"
-          >
-            {/* Delivery channel */}
-            <div className="flex flex-col gap-1.5">
-              <span className="text-xs font-medium text-foreground-muted">Delivery channel</span>
-              <MultiSelect
-                options={DELIVERY_CHANNEL_OPTIONS}
-                selected={deliveryChannels}
-                onChange={setDeliveryChannels}
-                placeholder="Select channels..."
-              />
-              <span className="text-[11px] leading-4 text-foreground-subtle">
-                Quick approve/reject decision for the extracted invoice.
-              </span>
+    <div className="flex items-start gap-8">
+      <PanelFrame>
+        <NodePropertyPanel
+          panelTitle="Properties"
+          nodeIcon={<UserRoundCheck />}
+          nodeLabel="Quick Approve"
+          nodeCategory="Quick approve/reject decision for the extracted invoice."
+          action={<DebugButton />}
+          onClose={() => {}}
+          contentInset="0.875rem"
+          className="h-[760px]"
+        >
+          <Tabs defaultValue="parameters" className="flex min-h-0 flex-1 flex-col">
+            <div className="shrink-0 pt-3 [padding-inline:var(--mf-content-inset,0.875rem)]">
+              <TabsList className={TAB_LIST_CLASS}>
+                <TabsTrigger value="parameters" className={TAB_TRIGGER_CLASS}>
+                  Parameters
+                </TabsTrigger>
+                <TabsTrigger value="error-handling" className={TAB_TRIGGER_CLASS}>
+                  Error handling
+                </TabsTrigger>
+                <TabsTrigger value="advanced" className={TAB_TRIGGER_CLASS}>
+                  Advanced
+                </TabsTrigger>
+              </TabsList>
             </div>
-
-            {/* Assignment criteria */}
-            <div className="flex flex-col gap-1.5">
-              <span className="text-xs font-medium text-foreground-muted">Assignment criteria</span>
-              <div className="flex gap-2">
-                <SearchInput
-                  className="flex-1"
-                  placeholder="Search group"
-                  value={assignmentSearch}
-                  onChange={setAssignmentSearch}
-                />
-                <Select value={assignmentGroup} onValueChange={setAssignmentGroup}>
-                  <SelectTrigger className="flex-1">
-                    <SelectValue placeholder="All users of group" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {ASSIGNMENT_GROUP_OPTIONS.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+            <TabsContent
+              value="parameters"
+              className="mt-0 flex min-h-0 flex-1 flex-col gap-4 overflow-auto py-3 [padding-inline:var(--mf-content-inset,0.875rem)]"
+            >
+              {/* Quick form */}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-medium text-foreground-muted">Quick form</span>
+                  <TooltipProvider delayDuration={300}>
+                    <ToggleGroup
+                      type="single"
+                      size="xs"
+                      spacing={2}
+                      value={formView}
+                      onValueChange={(v) => v && setFormView(v as 'edit' | 'preview' | 'json')}
+                    >
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <ToggleGroupItem
+                            value="edit"
+                            aria-label="Edit"
+                            className="!size-7 !rounded-lg !border-none !px-0 text-foreground-subtle transition hover:!bg-surface-overlay hover:!text-foreground data-[state=on]:!bg-surface-overlay data-[state=on]:!text-brand"
+                          >
+                            <Pencil size={12} />
+                          </ToggleGroupItem>
+                        </TooltipTrigger>
+                        <TooltipContent>Edit</TooltipContent>
+                      </Tooltip>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <ToggleGroupItem
+                            value="preview"
+                            aria-label="Preview"
+                            className="!size-7 !rounded-lg !border-none !px-0 text-foreground-subtle transition hover:!bg-surface-overlay hover:!text-foreground data-[state=on]:!bg-surface-overlay data-[state=on]:!text-brand"
+                          >
+                            <Eye size={12} />
+                          </ToggleGroupItem>
+                        </TooltipTrigger>
+                        <TooltipContent>Preview</TooltipContent>
+                      </Tooltip>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <ToggleGroupItem
+                            value="json"
+                            aria-label="JSON"
+                            className="!size-7 !rounded-lg !border-none !px-0 text-foreground-subtle transition hover:!bg-surface-overlay hover:!text-foreground data-[state=on]:!bg-surface-overlay data-[state=on]:!text-brand"
+                          >
+                            <Code2 size={12} />
+                          </ToggleGroupItem>
+                        </TooltipTrigger>
+                        <TooltipContent>JSON</TooltipContent>
+                      </Tooltip>
+                    </ToggleGroup>
+                  </TooltipProvider>
+                </div>
+                <Card>
+                  <CardContent className="flex flex-col gap-4 p-4">
+                    <div className="flex items-center gap-3.5">
+                      <div className="grid size-11 shrink-0 place-items-center rounded-xl bg-surface-overlay text-foreground-subtle [&>svg]:size-5">
+                        <Upload />
+                      </div>
+                      <div className="flex min-w-0 flex-1 flex-col justify-center">
+                        {editingFormTitle ? (
+                          <input
+                            ref={formTitleRef}
+                            value={formTitle}
+                            onChange={(e) => setFormTitle(e.target.value)}
+                            onBlur={() => setEditingFormTitle(false)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter' || e.key === 'Escape')
+                                setEditingFormTitle(false);
+                            }}
+                            className="rounded bg-surface-overlay px-1 text-base font-semibold leading-5 tracking-[-0.3px] text-foreground outline-none ring-1 ring-brand"
+                            autoFocus
+                          />
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setEditingFormTitle(true);
+                              setTimeout(() => formTitleRef.current?.select(), 0);
+                            }}
+                            className="truncate rounded px-1 text-left text-base font-semibold leading-5 tracking-[-0.3px] text-foreground transition hover:bg-surface-overlay"
+                          >
+                            {formTitle}
+                          </button>
+                        )}
+                        {editingFormDescription ? (
+                          <input
+                            ref={formDescriptionRef}
+                            value={formDescription}
+                            onChange={(e) => setFormDescription(e.target.value)}
+                            onBlur={() => setEditingFormDescription(false)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter' || e.key === 'Escape')
+                                setEditingFormDescription(false);
+                            }}
+                            className="rounded bg-surface-overlay px-1 text-xs leading-4 text-foreground outline-none ring-1 ring-brand"
+                            autoFocus
+                          />
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setEditingFormDescription(true);
+                              setTimeout(() => formDescriptionRef.current?.select(), 0);
+                            }}
+                            className="truncate rounded px-1 text-left text-xs leading-4 text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground"
+                          >
+                            {formDescription}
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                    {formView === 'edit' && (
+                      <>
+                        <DndContext
+                          sensors={sensors}
+                          collisionDetection={closestCenter}
+                          onDragEnd={handleDragEnd}
+                        >
+                          <SortableContext
+                            items={cases.map((c) => c.id)}
+                            strategy={verticalListSortingStrategy}
+                          >
+                            <div className="flex flex-col gap-4">
+                              {cases.map((c) => (
+                                <LockableCaseRow
+                                  key={c.id}
+                                  id={c.id}
+                                  caseTitle={c.title}
+                                  onTitleChange={(title) => updateCase(c.id, { title })}
+                                  required={c.required}
+                                  onDelete={() => deleteCase(c.id)}
+                                  value={c.value}
+                                  onValueChange={(value) => updateCase(c.id, { value })}
+                                  locked={c.locked}
+                                  onLockedChange={(locked) => updateCase(c.id, { locked })}
+                                  mode={c.mode}
+                                  onModeChange={(mode) => updateCase(c.id, { mode })}
+                                  fieldType={c.fieldType}
+                                  compact
+                                  onFieldTypeChange={(fieldType) =>
+                                    updateCaseFieldType(c.id, fieldType)
+                                  }
+                                />
+                              ))}
+                            </div>
+                          </SortableContext>
+                        </DndContext>
+                        <button
+                          type="button"
+                          onClick={addCase}
+                          className="flex cursor-pointer items-center gap-1.5 text-xs text-brand transition hover:text-brand-hover"
+                        >
+                          <Plus size={12} />
+                          Add field
+                        </button>
+                      </>
+                    )}
+                    {formView === 'preview' && (
+                      <div className="flex flex-col gap-4">
+                        {cases.map((c) => {
+                          const isExpression =
+                            FIELD_TYPE_META[c.fieldType].supportsExpression &&
+                            c.mode === 'expression';
+                          return (
+                            <div key={c.id} className="flex flex-col gap-1.5">
+                              <Label
+                                htmlFor={`preview-${c.id}`}
+                                className="text-xs font-medium text-foreground-muted"
+                              >
+                                {c.title}
+                                {c.required && <span className="ml-0.5 text-destructive">*</span>}
+                              </Label>
+                              {isExpression ? (
+                                <Input
+                                  id={`preview-${c.id}`}
+                                  readOnly={c.locked}
+                                  value={c.value}
+                                  onChange={(e) => updateCase(c.id, { value: e.target.value })}
+                                  placeholder="Enter an expression"
+                                  className="font-mono"
+                                />
+                              ) : c.fieldType === 'boolean' ? (
+                                <Switch
+                                  id={`preview-${c.id}`}
+                                  checked={c.value === 'true'}
+                                  onCheckedChange={(checked) =>
+                                    updateCase(c.id, { value: String(checked) })
+                                  }
+                                  disabled={c.locked}
+                                />
+                              ) : c.fieldType === 'date' ? (
+                                <DatePicker
+                                  disabled={c.locked}
+                                  value={c.value ? new Date(c.value) : undefined}
+                                  onValueChange={(date) =>
+                                    updateCase(c.id, { value: date ? date.toISOString() : '' })
+                                  }
+                                />
+                              ) : c.fieldType === 'single-select' ? (
+                                <Select
+                                  value={c.value || undefined}
+                                  onValueChange={(value) => updateCase(c.id, { value })}
+                                  disabled={c.locked}
+                                >
+                                  <SelectTrigger id={`preview-${c.id}`}>
+                                    <SelectValue placeholder="Select an option" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {DEMO_SELECT_OPTIONS.map((option) => (
+                                      <SelectItem key={option.value} value={option.value}>
+                                        {option.label}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              ) : c.fieldType === 'multi-select' ? (
+                                <MultiSelect
+                                  options={DEMO_SELECT_OPTIONS}
+                                  selected={parseListValue(c.value)}
+                                  onChange={(selected) =>
+                                    updateCase(c.id, { value: JSON.stringify(selected) })
+                                  }
+                                  placeholder="Select options..."
+                                  disabled={c.locked}
+                                />
+                              ) : c.fieldType === 'file' ? (
+                                <FileUpload
+                                  disabled={c.locked}
+                                  onFilesChange={(files) =>
+                                    updateCase(c.id, { value: files.map((f) => f.name).join(', ') })
+                                  }
+                                />
+                              ) : (
+                                <Input
+                                  id={`preview-${c.id}`}
+                                  type={c.fieldType === 'integer' ? 'number' : 'text'}
+                                  readOnly={c.locked}
+                                  value={c.value}
+                                  onChange={(e) => updateCase(c.id, { value: e.target.value })}
+                                  placeholder="Enter a value"
+                                />
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                    {formView === 'json' && (
+                      <div className="flex flex-col gap-1.5">
+                        <Textarea
+                          value={jsonDraft}
+                          onChange={(e) => handleJsonChange(e.target.value)}
+                          rows={14}
+                          spellCheck={false}
+                          className="resize-none font-mono text-xs"
+                        />
+                        {jsonError && <span className="text-xs text-destructive">{jsonError}</span>}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
               </div>
-            </div>
+            </TabsContent>
+            <TabsContent value="error-handling" className="mt-0" />
+            <TabsContent value="advanced" className="mt-0" />
+          </Tabs>
+        </NodePropertyPanel>
+      </PanelFrame>
 
-            {/* Quick form */}
-            <div className="flex flex-col gap-2">
-              <div className="flex items-center justify-between">
-                <span className="text-xs font-medium text-foreground-muted">Quick form</span>
-                <ToggleGroup
-                  type="single"
-                  size="xs"
-                  value={formView}
-                  onValueChange={(v) => v && setFormView(v as 'ui' | 'json')}
-                >
-                  <ToggleGroupItem value="ui">UI</ToggleGroupItem>
-                  <ToggleGroupItem value="json">JSON</ToggleGroupItem>
-                </ToggleGroup>
-              </div>
-              <Card>
-                <CardContent className="flex flex-col gap-4 p-4">
-                  {formView === 'ui' ? (
-                    <>
-                      <DndContext
-                        sensors={sensors}
-                        collisionDetection={closestCenter}
-                        onDragEnd={handleDragEnd}
-                      >
-                        <SortableContext
-                          items={cases.map((c) => c.id)}
-                          strategy={verticalListSortingStrategy}
-                        >
-                          <div className="flex flex-col gap-4">
-                            {cases.map((c) => (
-                              <LockableCaseRow
-                                key={c.id}
-                                id={c.id}
-                                caseTitle={c.title}
-                                onTitleChange={(title) => updateCase(c.id, { title })}
-                                required={c.required}
-                                onDelete={() => deleteCase(c.id)}
-                                value={c.value}
-                                onValueChange={(value) => updateCase(c.id, { value })}
-                                locked={c.locked}
-                                onLockedChange={(locked) => updateCase(c.id, { locked })}
-                                mode={c.mode}
-                                onModeChange={(mode) => updateCase(c.id, { mode })}
-                              />
-                            ))}
-                          </div>
-                        </SortableContext>
-                      </DndContext>
-                      <button
-                        type="button"
-                        onClick={addCase}
-                        className="flex cursor-pointer items-center gap-1.5 text-xs text-brand transition hover:text-brand-hover"
-                      >
-                        <Plus size={12} />
-                        Add case
-                      </button>
-                    </>
-                  ) : (
-                    <pre className="overflow-auto whitespace-pre-wrap text-xs text-foreground-muted">
-                      {JSON.stringify(cases, null, 2)}
-                    </pre>
-                  )}
-                </CardContent>
-              </Card>
-            </div>
-          </TabsContent>
-          <TabsContent value="error-handling" className="mt-0" />
-          <TabsContent value="advanced" className="mt-0" />
-        </Tabs>
-      </NodePropertyPanel>
-    </PanelFrame>
+      {/* Component showcase */}
+      <div className="flex w-[320px] shrink-0 flex-col gap-4 rounded-2xl border border-border-subtle bg-surface-raised p-5">
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-semibold text-foreground">LockableValueField</span>
+          <span className="text-xs leading-4 text-foreground-muted">
+            A reusable string field that can be locked to read-only and switched between a literal
+            value and a JS expression.
+          </span>
+        </div>
+        <ul className="flex list-disc flex-col gap-1.5 pl-4 text-xs leading-4 text-foreground-muted">
+          <li>
+            Left lock icon toggles Unlocked / Locked. Locked fields are read-only, not disabled.
+          </li>
+          <li>
+            Right value-mode icon switches between Fixed value and Expression, updating the value
+            styling. Only shown for types an expression can produce.
+          </li>
+          <li>
+            Field type dropdown swaps the control itself: String, Integer, Date, Boolean, Single
+            select, Multiselect, and File each render their own matching input.
+          </li>
+          <li>Built-in AI-assist popover to describe and generate a value.</li>
+          <li>Insert-variable affordance for binding to upstream data.</li>
+          <li>Built entirely on apollo-wind&apos;s InputGroup primitive.</li>
+          <li>
+            Header row is responsive (container query): the type, AI-assist, and insert-variable
+            controls collapse to icon-only once the field gets too narrow for their labels.
+          </li>
+        </ul>
+        <div className="flex flex-col gap-2 border-t border-border-subtle pt-4">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-foreground-subtle">
+            Full view
+          </span>
+          <LockableValueField
+            label={<Label className="text-xs font-medium text-foreground-muted">Label</Label>}
+            value={showcaseValue}
+            onValueChange={setShowcaseValue}
+            locked={showcaseLocked}
+            onLockedChange={setShowcaseLocked}
+            mode={showcaseMode}
+            onModeChange={setShowcaseMode}
+            fieldType={showcaseFieldType}
+            onFieldTypeChange={handleShowcaseFieldTypeChange}
+          />
+        </div>
+        <div className="flex flex-col gap-2 border-t border-border-subtle pt-4">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-foreground-subtle">
+            Compact view (narrow container)
+          </span>
+          <div className="w-[200px]">
+            <LockableValueField
+              label={<Label className="text-xs font-medium text-foreground-muted">Label</Label>}
+              value={showcaseValue}
+              onValueChange={setShowcaseValue}
+              locked={showcaseLocked}
+              onLockedChange={setShowcaseLocked}
+              mode={showcaseMode}
+              onModeChange={setShowcaseMode}
+              fieldType={showcaseFieldType}
+              onFieldTypeChange={handleShowcaseFieldTypeChange}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
 
-export const LockableField: Story = {
-  name: 'Lockable Field',
-  render: () => <LockableValueFieldStory />,
+export const QuickForm: Story = {
+  name: 'Quick Form',
+  render: () => <QuickFormStory />,
 };
 
 export const Output: Story = {
diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts b/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts
index d83f76c1b..3b489b0bc 100644
--- a/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts
@@ -1,6 +1,15 @@
 export type { ExpressionFieldProps, ExpressionMode } from './ExpressionField';
 export { ExpressionField } from './ExpressionField';
-export type { LockableValueFieldMode, LockableValueFieldProps } from './LockableValueField';
-export { LockableValueField } from './LockableValueField';
+export type {
+  LockableFieldType,
+  LockableValueFieldMode,
+  LockableValueFieldProps,
+} from './LockableValueField';
+export {
+  DEMO_SELECT_OPTIONS,
+  FIELD_TYPE_META,
+  LockableValueField,
+  parseListValue,
+} from './LockableValueField';
 export { NodePropertyPanel } from './NodePropertyPanel';
 export type { NodePropertyPanelProps } from './NodePropertyPanel.types';