feat: add wizard components and API for instruction generation

- Introduced WizardAnswerGrid component for displaying answers in a grid format.
- Added WizardCompletionSummary component to review selections before generating instructions.
- Created WizardConfirmationDialog for user confirmation on actions like reset or file change.
- Enhanced icon utilities with support for simple-icons and custom icons.
- Implemented instructions API to handle instruction file generation.
- Developed wizard response handling functions for managing user selections and responses.
- Added summary building functionality to compile user selections for review.

Author: spivx

components/instructions-wizard.tsx

@@ -0,0 +1,74 @@
+import { getAccessibleIconColor, getFallbackInitials, getIconDescriptor, hexToRgba, iconColorOverrides } from "@/lib/icon-utils"
+import type { WizardAnswer } from "@/types/wizard"
+
+import { InstructionsAnswerCard } from "./instructions-answer-card"
+
+type WizardAnswerGridProps = {
+  answers: WizardAnswer[]
+  onAnswerClick: (answer: WizardAnswer) => void
+  isSelected: (value: string) => boolean
+}
+
+export function WizardAnswerGrid({ answers, onAnswerClick, isSelected }: WizardAnswerGridProps) {
+  return (
+    <div className="mt-6 grid gap-3 sm:grid-cols-2">
+      {answers.map((answer) => {
+        const iconDescriptor = getIconDescriptor(answer.icon ?? answer.value)
+        const iconHex = iconDescriptor
+          ? iconColorOverrides[iconDescriptor.slug] ?? iconDescriptor.hex
+          : undefined
+        const iconColor = iconHex ? getAccessibleIconColor(iconHex) : undefined
+        const iconBackgroundColor = iconColor ? hexToRgba(iconColor, 0.18) : null
+        const iconRingColor = iconColor ? hexToRgba(iconColor, 0.32) : null
+        const fallbackInitials = getFallbackInitials(answer.label)
+        const iconElement = iconDescriptor ? (
+          <span
+            aria-hidden
+            className={`flex h-10 w-10 items-center justify-center rounded-xl text-muted-foreground ring-1 ring-border/40${iconColor ? "" : " bg-secondary/40"}`}
+            style={{
+              color: iconColor,
+              backgroundColor: iconBackgroundColor ?? undefined,
+              boxShadow: iconRingColor ? `inset 0 0 0 1px ${iconRingColor}` : undefined,
+            }}
+          >
+            <span
+              className="inline-flex h-6 w-6 items-center justify-center text-current [&>svg]:h-full [&>svg]:w-full"
+              style={{ color: iconColor }}
+              dangerouslySetInnerHTML={{ __html: iconDescriptor.markup }}
+            />
+          </span>
+        ) : (
+          <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-secondary/40 text-xs font-semibold uppercase tracking-wide text-muted-foreground ring-1 ring-border/40">
+            {fallbackInitials}
+          </span>
+        )
+
+        const hasTooltipContent = Boolean(
+          (answer.infoLines && answer.infoLines.length > 0) ||
+          answer.example ||
+          (answer.tags && answer.tags.length > 0) ||
+          answer.docs
+        )
+
+        return (
+          <InstructionsAnswerCard
+            key={answer.value}
+            onClick={() => {
+              void onAnswerClick(answer)
+            }}
+            label={answer.label}
+            iconElement={iconElement}
+            hasTooltipContent={hasTooltipContent}
+            infoLines={answer.infoLines}
+            example={answer.example}
+            tags={answer.tags}
+            docs={answer.docs}
+            selected={isSelected(answer.value)}
+            disabled={answer.disabled}
+            disabledLabel={answer.disabledLabel}
+          />
+        )
+      })}
+    </div>
+  )
+}

components/wizard-answer-grid.tsx

@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/button"
+import type { CompletionSummaryEntry } from "@/lib/wizard-summary"
+
+type WizardCompletionSummaryProps = {
+  summary: CompletionSummaryEntry[]
+  onBack: () => void
+  onGenerate: () => void
+  isGenerating: boolean
+}
+
+export function WizardCompletionSummary({
+  summary,
+  onBack,
+  onGenerate,
+  isGenerating,
+}: WizardCompletionSummaryProps) {
+  return (
+    <div className="space-y-6 rounded-3xl border border-border/80 bg-card/95 p-8 shadow-lg">
+      <div className="space-y-2">
+        <h2 className="text-2xl font-semibold text-foreground">Review your selections</h2>
+        <p className="text-sm text-muted-foreground">
+          Adjust anything before we create your instruction files.
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        {summary.map((entry) => (
+          <div
+            key={entry.id}
+            className="rounded-2xl border border-border/70 bg-background/90 p-5"
+          >
+            <p className="text-sm font-medium text-muted-foreground">{entry.question}</p>
+            {entry.hasSelection ? (
+              <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-foreground">
+                {entry.answers.map((answer) => (
+                  <li key={answer}>{answer}</li>
+                ))}
+              </ul>
+            ) : (
+              <p className="mt-2 text-base font-semibold text-foreground">No selection</p>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Button variant="outline" onClick={onBack}>
+          Back to questions
+        </Button>
+        <Button onClick={onGenerate} disabled={isGenerating}>
+          {isGenerating ? "Generating..." : "Generate My Instructions"}
+        </Button>
+      </div>
+    </div>
+  )
+}

components/wizard-completion-summary.tsx

@@ -0,0 +1,48 @@
+import { Button } from "@/components/ui/button"
+import type { WizardConfirmationIntent } from "@/types/wizard"
+
+type WizardConfirmationDialogProps = {
+  intent: WizardConfirmationIntent
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+const copyByIntent: Record<WizardConfirmationIntent, {
+  title: string
+  description: string
+  confirmLabel: string
+}> = {
+  reset: {
+    title: "Start over?",
+    description: "This will clear all of your current selections. Are you sure you want to continue?",
+    confirmLabel: "Reset Wizard",
+  },
+  "change-file": {
+    title: "Change file?",
+    description: "Switching files will clear all of your current selections. Are you sure you want to continue?",
+    confirmLabel: "Change File",
+  },
+}
+
+export function WizardConfirmationDialog({ intent, onCancel, onConfirm }: WizardConfirmationDialogProps) {
+  const { title, description, confirmLabel } = copyByIntent[intent]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm">
+      <div className="w-full max-w-md space-y-4 rounded-2xl border border-border/70 bg-card/95 p-6 shadow-2xl">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+          <p className="text-sm text-muted-foreground">{description}</p>
+        </div>
+        <div className="flex flex-wrap justify-end gap-2">
+          <Button variant="ghost" onClick={onCancel}>
+            Keep My Answers
+          </Button>
+          <Button variant="destructive" onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}