refactor: replace DecisionPrompt with OptionList, add shared ActionButtons

- Add shared/ directory with reusable ActionButtons component
- Add option-list component as replacement for decision-prompt
- Add footerActions support to DataTable, MediaCard, and SocialPost
- Rename action files for clarity (media-actions.tsx, post-actions.tsx)
- Add documentation comments to _ui.tsx/_cn.ts for portability
- Remove layout prop from ActionButtons (responsive by default)
- Update docs, presets, and gallery for OptionList

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: petekp

app/components/home/chat-showcase.tsx

@@ -20,10 +20,6 @@ import {
   SocialPost,
   type SerializableSocialPost,
 } from "@/components/tool-ui/social-post";
-import {
-  DecisionPrompt,
-  type DecisionPromptAction,
-} from "@/components/tool-ui/decision-prompt";
 
 type BubbleProps = {
   role: "user" | "assistant";
@@ -297,10 +293,10 @@ const SOCIAL_POST: SerializableSocialPost = {
   language: "en-US",
 };
 
-const DECISION_ACTIONS: DecisionPromptAction[] = [
-  { id: "cancel", label: "Discard", variant: "ghost" },
-  { id: "edit", label: "Revise", variant: "outline" },
-  { id: "send", label: "Post Now", variant: "default" },
+const SOCIAL_POST_ACTIONS = [
+  { id: "cancel", label: "Discard", variant: "ghost" as const },
+  { id: "edit", label: "Revise", variant: "outline" as const },
+  { id: "send", label: "Post Now", variant: "default" as const },
 ];
 
 function createSceneConfigs(): SceneConfig[] {
@@ -327,18 +323,17 @@ function createSceneConfigs(): SceneConfig[] {
       toolUI: <MediaCard {...MEDIA_CARD} maxWidth="420px" />,
       toolFallbackHeight: 260,
     },
-    // Scene 3: Open Source Release / SocialPost + DecisionPrompt
+    // Scene 3: Open Source Release / SocialPost with footerActions
     {
       userMessage: "Draft a tweet about our open-source release",
       preamble: "Here's a draft announcement:",
       toolUI: (
-        <div className="w-full max-w-[600px] min-w-0 space-y-3">
-          <SocialPost {...SOCIAL_POST} className="w-full" maxWidth="100%" />
-          <DecisionPrompt
-            prompt="Ready to announce?"
-            actions={DECISION_ACTIONS}
-            align="right"
-            layout="inline"
+        <div className="w-full max-w-[600px] min-w-0">
+          <SocialPost
+            {...SOCIAL_POST}
+            className="w-full"
+            maxWidth="100%"
+            footerActions={SOCIAL_POST_ACTIONS}
           />
         </div>
       ),

app/docs/[component]/page.tsx

@@ -3,7 +3,7 @@ import { getComponentById } from "@/lib/docs/component-registry";
 import { DataTablePreview } from "./previews/data-table-preview";
 import { SocialPostPreview } from "./previews/social-post-preview";
 import { MediaCardPreview } from "./previews/media-card-preview";
-import { DecisionPromptPreview } from "./previews/decision-prompt-preview";
+import { OptionListPreview } from "./previews/option-list-preview";
 
 export default async function ComponentPage({
   params,
@@ -24,8 +24,8 @@ export default async function ComponentPage({
       return <SocialPostPreview />;
     case "media-card":
       return <MediaCardPreview />;
-    case "decision-prompt":
-      return <DecisionPromptPreview />;
+    case "option-list":
+      return <OptionListPreview />;
     default:
       notFound();
   }

app/docs/[component]/previews/data-table-preview.tsx

@@ -130,12 +130,6 @@ export function DataTablePreview({
           className="h-full w-full"
           componentId="data-table"
           config={currentConfig}
-          socialPostConfig={undefined}
-          mediaCardConfig={undefined}
-          decisionPromptConfig={undefined}
-          decisionPromptSelectedAction={undefined}
-          decisionPromptSelectedActions={[]}
-          mediaCardMaxWidth={undefined}
           sort={sort}
           isLoading={loading}
           emptyMessage={emptyMessage}

app/docs/[component]/previews/decision-prompt-preview.tsx

@@ -88,16 +88,9 @@ export function MediaCardPreview({
         <CodePanel
           className="h-full w-full"
           componentId="media-card"
-          config={undefined}
-          socialPostConfig={undefined}
           mediaCardConfig={currentConfig}
-          decisionPromptConfig={undefined}
-          decisionPromptSelectedAction={undefined}
-          decisionPromptSelectedActions={[]}
           mediaCardMaxWidth="420px"
-          sort={{}}
           isLoading={loading}
-          emptyMessage=""
           mode="plain"
         />
       )}

app/docs/[component]/previews/media-card-preview.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback, useState, useEffect } from "react";
+import { useSearchParams, usePathname, useRouter } from "next/navigation";
+import { ComponentPreviewShell } from "../component-preview-shell";
+import { PresetSelector } from "../../_components/preset-selector";
+import { CodePanel } from "../../_components/code-panel";
+import { OptionList } from "@/components/tool-ui/option-list";
+import {
+  OptionListPresetName,
+  optionListPresets,
+} from "@/lib/presets/option-list";
+
+export function OptionListPreview({
+  withContainer = true,
+}: {
+  withContainer?: boolean;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const presetParam = searchParams.get("preset");
+  const defaultPreset = "export";
+  const initialPreset: OptionListPresetName =
+    presetParam && presetParam in optionListPresets
+      ? (presetParam as OptionListPresetName)
+      : defaultPreset;
+
+  const [currentPreset, setCurrentPreset] =
+    useState<OptionListPresetName>(initialPreset);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selection, setSelection] = useState<string[] | string | null>(null);
+
+  useEffect(() => {
+    const presetParam = searchParams.get("preset");
+    if (
+      presetParam &&
+      presetParam in optionListPresets &&
+      presetParam !== currentPreset
+    ) {
+      setCurrentPreset(presetParam as OptionListPresetName);
+      setIsLoading(false);
+      setSelection(null);
+    }
+  }, [searchParams, currentPreset]);
+
+  const currentConfig = optionListPresets[currentPreset];
+
+  const handleSelectPreset = useCallback(
+    (preset: unknown) => {
+      const presetName = preset as OptionListPresetName;
+      setCurrentPreset(presetName);
+      setIsLoading(false);
+      setSelection(null);
+
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("preset", presetName);
+      router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    },
+    [router, pathname, searchParams],
+  );
+
+  return (
+    <ComponentPreviewShell
+      withContainer={withContainer}
+      isLoading={isLoading}
+      onLoadingChange={setIsLoading}
+      presetSelector={
+        <PresetSelector
+          componentId="option-list"
+          currentPreset={currentPreset}
+          onSelectPreset={handleSelectPreset}
+        />
+      }
+      renderPreview={() => (
+        <div className="mx-auto" style={{ maxWidth: "420px" }}>
+          <OptionList
+            {...currentConfig.optionList}
+            value={selection}
+            onChange={setSelection}
+            onConfirm={(sel) => {
+              console.log("OptionList confirmed:", sel);
+              alert(`Selection confirmed: ${JSON.stringify(sel)}`);
+            }}
+          />
+        </div>
+      )}
+      renderCodePanel={() => (
+        <CodePanel
+          className="h-full w-full"
+          componentId="option-list"
+          optionListConfig={currentConfig}
+          optionListSelection={selection}
+          mode="plain"
+        />
+      )}
+    />
+  );
+}

app/docs/[component]/previews/option-list-preview.tsx

@@ -86,16 +86,8 @@ export function SocialPostPreview({
         <CodePanel
           className="h-full w-full"
           componentId="social-post"
-          config={undefined}
           socialPostConfig={currentConfig}
-          mediaCardConfig={undefined}
-          decisionPromptConfig={undefined}
-          decisionPromptSelectedAction={undefined}
-          decisionPromptSelectedActions={[]}
-          mediaCardMaxWidth={undefined}
-          sort={{}}
           isLoading={loading}
-          emptyMessage=""
           mode="plain"
         />
       )}