@tanstack/cta-ui-base 0.28.0 → 0.29.1

package/dist/components/add-on-config-dialog.d.ts

@@ -0,0 +1,10 @@
+import type { AddOnInfo } from '../types';
+interface AddOnConfigDialogProps {
+    addOn: AddOnInfo | undefined;
+    selectedOptions: Record<string, any>;
+    onOptionChange: (optionName: string, value: any) => void;
+    onClose: () => void;
+    disabled?: boolean;
+}
+export default function AddOnConfigDialog({ addOn, selectedOptions, onOptionChange, onClose, disabled, }: AddOnConfigDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/add-on-config-dialog.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './ui/dialog';
+import AddOnOptionsPanel from './add-on-options-panel';
+export default function AddOnConfigDialog({ addOn, selectedOptions, onOptionChange, onClose, disabled = false, }) {
+    if (!addOn)
+        return null;
+    return (_jsx(Dialog, { open: !!addOn, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { className: "sm:max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Configure ", addOn.name] }), _jsx(DialogDescription, { children: "Customize the configuration options for this add-on." })] }), _jsx("div", { className: "py-4", children: _jsx(AddOnOptionsPanel, { addOn: addOn, selectedOptions: selectedOptions, onOptionChange: onOptionChange, disabled: disabled }) })] }) }));
+}

package/dist/components/add-on-option-select.d.ts

@@ -0,0 +1,9 @@
+import type { AddOnSelectOption } from '@tanstack/cta-engine';
+interface AddOnOptionSelectProps {
+    option: AddOnSelectOption;
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+export default function AddOnOptionSelect({ option, value, onChange, disabled, }: AddOnOptionSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/add-on-option-select.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu';
+import { Button } from './ui/button';
+import { Label } from './ui/label';
+export default function AddOnOptionSelect({ option, value, onChange, disabled = false, }) {
+    const selectedOption = option.options.find((opt) => opt.value === value);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-medium text-gray-300", children: option.label }), option.description && (_jsx("p", { className: "text-xs text-gray-500", children: option.description })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "w-full justify-between", disabled: disabled, children: [_jsx("span", { children: selectedOption?.label || 'Select option...' }), _jsx(ChevronDownIcon, { className: "h-4 w-4" })] }) }), _jsx(DropdownMenuContent, { className: "w-full min-w-[200px]", children: option.options.map((opt) => (_jsx(DropdownMenuItem, { onClick: () => onChange(opt.value), className: value === opt.value ? 'bg-accent' : '', children: opt.label }, opt.value))) })] })] }));
+}

package/dist/components/add-on-options-panel.d.ts

@@ -0,0 +1,9 @@
+import type { AddOnInfo } from '../types';
+interface AddOnOptionsPanelProps {
+    addOn: AddOnInfo;
+    selectedOptions: Record<string, any>;
+    onOptionChange: (optionName: string, value: any) => void;
+    disabled?: boolean;
+}
+export default function AddOnOptionsPanel({ addOn, selectedOptions, onOptionChange, disabled, }: AddOnOptionsPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/add-on-options-panel.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AddOnOptionSelect from './add-on-option-select';
+export default function AddOnOptionsPanel({ addOn, selectedOptions, onOptionChange, disabled = false, }) {
+    if (!addOn.options || Object.keys(addOn.options).length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "space-y-3", children: Object.entries(addOn.options).map(([optionName, option]) => {
+            if (option && typeof option === 'object' && 'type' in option && option.type === 'select') {
+                return (_jsx(AddOnOptionSelect, { option: option, value: selectedOptions[optionName] || option.default, onChange: (value) => onOptionChange(optionName, value), disabled: disabled }, optionName));
+            }
+            // Future option types can be added here
+            return null;
+        }) }));
+}

package/dist/components/sidebar-items/add-ons.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useMemo, useState } from 'react';
-import { InfoIcon } from 'lucide-react';
+import { InfoIcon, SettingsIcon } from 'lucide-react';
 import { Switch } from '../ui/switch';
 import { Label } from '../ui/label';
-import { useAddOns } from '../../store/project';
+import { Button } from '../ui/button';
+import { useAddOns, useProjectOptions } from '../../store/project';
 import ImportCustomAddOn from '../custom-add-on-dialog';
 import AddOnInfoDialog from '../add-on-info-dialog';
+import AddOnConfigDialog from '../add-on-config-dialog';
 const addOnTypeLabels = {
     toolchain: 'Toolchain',
     'add-on': 'Add-on',
@@ -13,16 +15,24 @@ const addOnTypeLabels = {
     example: 'Example',
 };
 export default function SelectedAddOns() {
-    const { availableAddOns, addOnState, toggleAddOn } = useAddOns();
+    const { availableAddOns, addOnState, toggleAddOn, setAddOnOption } = useAddOns();
+    const addOnOptions = useProjectOptions((state) => state.addOnOptions);
     const sortedAddOns = useMemo(() => {
         return availableAddOns.sort((a, b) => {
             return a.name.localeCompare(b.name);
         });
     }, [availableAddOns]);
     const [infoAddOn, setInfoAddOn] = useState();
-    return (_jsxs(_Fragment, { children: [_jsx(AddOnInfoDialog, { addOn: infoAddOn, onClose: () => setInfoAddOn(undefined) }), Object.keys(addOnTypeLabels).map((type) => (_jsx(Fragment, { children: sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (_jsxs("div", { className: "block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active", children: [_jsx("h3", { className: "font-medium", children: addOnTypeLabels[type] }), _jsx("div", { className: "flex flex-row flex-wrap", children: sortedAddOns
-                                .filter((addOn) => addOn.type === type)
-                                .map((addOn) => (_jsx("div", { className: "w-1/2 flex flex-row justify-between pr-4", children: _jsxs("div", { className: "p-1 flex flex-row items-center", children: [_jsx(Switch, { id: addOn.id, checked: addOnState[addOn.id].selected, disabled: !addOnState[addOn.id].enabled, onCheckedChange: () => {
-                                                toggleAddOn(addOn.id);
-                                            } }), _jsxs(Label, { htmlFor: addOn.id, className: "pl-2 font-semibold text-gray-300", children: [addOn.smallLogo && (_jsx("img", { src: `data:image/svg+xml,${encodeURIComponent(addOn.smallLogo)}`, alt: addOn.name, className: "w-5" })), addOn.name] }), _jsx(InfoIcon, { className: "ml-2 w-4 text-gray-600", onClick: () => setInfoAddOn(addOn) })] }) }, addOn.id))) })] }, `${type}-add-ons`)) }, type))), _jsx("div", { className: "mt-4", children: _jsx(ImportCustomAddOn, {}) })] }));
+    const [configAddOn, setConfigAddOn] = useState();
+    return (_jsxs(_Fragment, { children: [_jsx(AddOnInfoDialog, { addOn: infoAddOn, onClose: () => setInfoAddOn(undefined) }), _jsx(AddOnConfigDialog, { addOn: configAddOn, selectedOptions: configAddOn ? addOnOptions[configAddOn.id] || {} : {}, onOptionChange: (optionName, value) => {
+                    if (configAddOn) {
+                        setAddOnOption(configAddOn.id, optionName, value);
+                    }
+                }, onClose: () => setConfigAddOn(undefined), disabled: configAddOn ? !addOnState[configAddOn.id]?.enabled : false }), _jsx("div", { className: "max-h-[60vh] overflow-y-auto space-y-2", children: Object.keys(addOnTypeLabels).map((type) => (_jsx(Fragment, { children: sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (_jsxs("div", { className: "block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active", children: [_jsx("h3", { className: "font-medium", children: addOnTypeLabels[type] }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "flex flex-row flex-wrap", children: sortedAddOns
+                                        .filter((addOn) => addOn.type === type)
+                                        .map((addOn) => (_jsx("div", { className: "w-1/2", children: _jsxs("div", { className: "flex flex-row items-center justify-between", children: [_jsxs("div", { className: "p-1 flex flex-row items-center", children: [_jsx(Switch, { id: addOn.id, checked: addOnState[addOn.id].selected, disabled: !addOnState[addOn.id].enabled, onCheckedChange: () => {
+                                                                toggleAddOn(addOn.id);
+                                                            } }), _jsxs(Label, { htmlFor: addOn.id, className: "pl-2 font-semibold text-gray-300 flex items-center gap-2", children: [addOn.smallLogo && (_jsx("img", { src: `data:image/svg+xml,${encodeURIComponent(addOn.smallLogo)}`, alt: addOn.name, className: "w-5" })), addOn.name] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [addOnState[addOn.id].selected &&
+                                                            addOn.options &&
+                                                            Object.keys(addOn.options).length > 0 && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0 text-gray-600 hover:text-gray-400", onClick: () => setConfigAddOn(addOn), disabled: !addOnState[addOn.id].enabled, children: _jsx(SettingsIcon, { className: "w-4 h-4" }) })), _jsx(InfoIcon, { className: "w-4 text-gray-600 cursor-pointer hover:text-gray-400", onClick: () => setInfoAddOn(addOn) })] })] }) }, addOn.id))) }) })] }, `${type}-add-ons`)) }, type))) }), _jsx("div", { className: "mt-4", children: _jsx(ImportCustomAddOn, {}) })] }));
 }

package/dist/store/project.d.ts

@@ -25,6 +25,8 @@ export declare const useProjectStarter: import("zustand").UseBoundStore<import("
 export declare function addCustomAddOn(addOn: AddOnInfo): void;
 export declare function useAddOns(): {
     toggleAddOn: (addOnId: string) => void;
+    setAddOnOption: (addOnId: string, optionName: string, value: any) => void;
+    getAddOnOptions: (addOnId: string) => Record<string, any>;
     chosenAddOns: string[];
     availableAddOns: AddOnInfo[];
     userSelectedAddOns: string[];

package/dist/store/project.js

@@ -14,6 +14,7 @@ export const useProjectOptions = create(() => ({
     tailwind: true,
     git: true,
     chosenAddOns: [],
+    addOnOptions: {},
     packageManager: 'pnpm',
 }));
 const useInitialData = () => useQuery({
@@ -137,9 +138,27 @@ export function useAddOns() {
                 }
             }
         }
-    }, [ready, addOnState]);
+    }, [ready, addOnState, availableAddOns]);
+    const setAddOnOption = useCallback((addOnId, optionName, value) => {
+        if (!ready)
+            return;
+        useProjectOptions.setState((state) => ({
+            addOnOptions: {
+                ...state.addOnOptions,
+                [addOnId]: {
+                    ...state.addOnOptions[addOnId],
+                    [optionName]: value,
+                },
+            },
+        }));
+    }, [ready]);
+    const getAddOnOptions = useCallback((addOnId) => {
+        return useProjectOptions.getState().addOnOptions[addOnId] || {};
+    }, []);
     return {
         toggleAddOn,
+        setAddOnOption,
+        getAddOnOptions,
         chosenAddOns,
         availableAddOns,
         userSelectedAddOns,

package/package.json

@@ -36,7 +36,7 @@
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.0.2",
     "zustand": "^5.0.3",
-    "@tanstack/cta-engine": "0.28.0"
+    "@tanstack/cta-engine": "0.29.1"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
@@ -45,6 +45,6 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.1.4"
   },
-  "version": "0.28.0",
+  "version": "0.29.1",
   "scripts": {}
 }

package/src/components/add-on-config-dialog.tsx

@@ -0,0 +1,51 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog'
+
+import AddOnOptionsPanel from './add-on-options-panel'
+
+import type { AddOnInfo } from '../types'
+
+interface AddOnConfigDialogProps {
+  addOn: AddOnInfo | undefined
+  selectedOptions: Record<string, any>
+  onOptionChange: (optionName: string, value: any) => void
+  onClose: () => void
+  disabled?: boolean
+}
+
+export default function AddOnConfigDialog({
+  addOn,
+  selectedOptions,
+  onOptionChange,
+  onClose,
+  disabled = false,
+}: AddOnConfigDialogProps) {
+  if (!addOn) return null
+
+  return (
+    <Dialog open={!!addOn} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Configure {addOn.name}</DialogTitle>
+          <DialogDescription>
+            Customize the configuration options for this add-on.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="py-4">
+          <AddOnOptionsPanel
+            addOn={addOn}
+            selectedOptions={selectedOptions}
+            onOptionChange={onOptionChange}
+            disabled={disabled}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/add-on-option-select.tsx

@@ -0,0 +1,63 @@
+import { ChevronDownIcon } from 'lucide-react'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu'
+import { Button } from './ui/button'
+import { Label } from './ui/label'
+
+import type { AddOnSelectOption } from '@tanstack/cta-engine'
+
+interface AddOnOptionSelectProps {
+  option: AddOnSelectOption
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+}
+
+export default function AddOnOptionSelect({
+  option,
+  value,
+  onChange,
+  disabled = false,
+}: AddOnOptionSelectProps) {
+  const selectedOption = option.options.find((opt: { value: string; label: string }) => opt.value === value)
+
+  return (
+    <div className="space-y-2">
+      <Label className="text-sm font-medium text-gray-300">
+        {option.label}
+      </Label>
+      {option.description && (
+        <p className="text-xs text-gray-500">{option.description}</p>
+      )}
+      
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            className="w-full justify-between"
+            disabled={disabled}
+          >
+            <span>{selectedOption?.label || 'Select option...'}</span>
+            <ChevronDownIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-full min-w-[200px]">
+          {option.options.map((opt: { value: string; label: string }) => (
+            <DropdownMenuItem
+              key={opt.value}
+              onClick={() => onChange(opt.value)}
+              className={value === opt.value ? 'bg-accent' : ''}
+            >
+              {opt.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/components/add-on-options-panel.tsx

@@ -0,0 +1,42 @@
+import AddOnOptionSelect from './add-on-option-select'
+
+import type { AddOnInfo } from '../types'
+
+interface AddOnOptionsPanelProps {
+  addOn: AddOnInfo
+  selectedOptions: Record<string, any>
+  onOptionChange: (optionName: string, value: any) => void
+  disabled?: boolean
+}
+
+export default function AddOnOptionsPanel({
+  addOn,
+  selectedOptions,
+  onOptionChange,
+  disabled = false,
+}: AddOnOptionsPanelProps) {
+  if (!addOn.options || Object.keys(addOn.options).length === 0) {
+    return null
+  }
+
+  return (
+    <div className="space-y-3">
+      {Object.entries(addOn.options).map(([optionName, option]) => {
+        if (option && typeof option === 'object' && 'type' in option && option.type === 'select') {
+          return (
+            <AddOnOptionSelect
+              key={optionName}
+              option={option as any}
+              value={selectedOptions[optionName] || (option as any).default}
+              onChange={(value) => onOptionChange(optionName, value)}
+              disabled={disabled}
+            />
+          )
+        }
+        
+        // Future option types can be added here
+        return null
+      })}
+    </div>
+  )
+}

package/src/components/sidebar-items/add-ons.tsx

@@ -1,13 +1,15 @@
 import { Fragment, useMemo, useState } from 'react'
-import { InfoIcon } from 'lucide-react'
+import { InfoIcon, SettingsIcon } from 'lucide-react'
 
 import { Switch } from '../ui/switch'
 import { Label } from '../ui/label'
+import { Button } from '../ui/button'
 
-import { useAddOns } from '../../store/project'
+import { useAddOns, useProjectOptions } from '../../store/project'
 
 import ImportCustomAddOn from '../custom-add-on-dialog'
 import AddOnInfoDialog from '../add-on-info-dialog'
+import AddOnConfigDialog from '../add-on-config-dialog'
 
 import type { AddOnInfo } from '../../types'
 
@@ -19,7 +21,9 @@ const addOnTypeLabels: Record<string, string> = {
 }
 
 export default function SelectedAddOns() {
-  const { availableAddOns, addOnState, toggleAddOn } = useAddOns()
+  const { availableAddOns, addOnState, toggleAddOn, setAddOnOption } =
+    useAddOns()
+  const addOnOptions = useProjectOptions((state) => state.addOnOptions)
 
   const sortedAddOns = useMemo(() => {
     return availableAddOns.sort((a, b) => {
@@ -28,6 +32,7 @@ export default function SelectedAddOns() {
   }, [availableAddOns])
 
   const [infoAddOn, setInfoAddOn] = useState<AddOnInfo>()
+  const [configAddOn, setConfigAddOn] = useState<AddOnInfo>()
 
   return (
     <>
@@ -35,58 +40,87 @@ export default function SelectedAddOns() {
         addOn={infoAddOn}
         onClose={() => setInfoAddOn(undefined)}
       />
-      {Object.keys(addOnTypeLabels).map((type) => (
-        <Fragment key={type}>
-          {sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (
-            <div
-              key={`${type}-add-ons`}
-              className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active"
-            >
-              <h3 className="font-medium">{addOnTypeLabels[type]}</h3>
-              <div className="flex flex-row flex-wrap">
-                {sortedAddOns
-                  .filter((addOn) => addOn.type === type)
-                  .map((addOn) => (
-                    <div
-                      key={addOn.id}
-                      className="w-1/2 flex flex-row justify-between pr-4"
-                    >
-                      <div className="p-1 flex flex-row items-center">
-                        <Switch
-                          id={addOn.id}
-                          checked={addOnState[addOn.id].selected}
-                          disabled={!addOnState[addOn.id].enabled}
-                          onCheckedChange={() => {
-                            toggleAddOn(addOn.id)
-                          }}
-                        />
-                        <Label
-                          htmlFor={addOn.id}
-                          className="pl-2 font-semibold text-gray-300"
-                        >
-                          {addOn.smallLogo && (
-                            <img
-                              src={`data:image/svg+xml,${encodeURIComponent(
-                                addOn.smallLogo,
-                              )}`}
-                              alt={addOn.name}
-                              className="w-5"
-                            />
-                          )}
-                          {addOn.name}
-                        </Label>
-                        <InfoIcon
-                          className="ml-2 w-4 text-gray-600"
-                          onClick={() => setInfoAddOn(addOn)}
-                        />
-                      </div>
-                    </div>
-                  ))}
+      <AddOnConfigDialog
+        addOn={configAddOn}
+        selectedOptions={configAddOn ? addOnOptions[configAddOn.id] || {} : {}}
+        onOptionChange={(optionName, value) => {
+          if (configAddOn) {
+            setAddOnOption(configAddOn.id, optionName, value)
+          }
+        }}
+        onClose={() => setConfigAddOn(undefined)}
+        disabled={configAddOn ? !addOnState[configAddOn.id]?.enabled : false}
+      />
+      <div className="max-h-[60vh] overflow-y-auto space-y-2">
+        {Object.keys(addOnTypeLabels).map((type) => (
+          <Fragment key={type}>
+            {sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (
+              <div
+                key={`${type}-add-ons`}
+                className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active"
+              >
+                <h3 className="font-medium">{addOnTypeLabels[type]}</h3>
+                <div className="space-y-3">
+                  <div className="flex flex-row flex-wrap">
+                    {sortedAddOns
+                      .filter((addOn) => addOn.type === type)
+                      .map((addOn) => (
+                        <div key={addOn.id} className="w-1/2">
+                          <div className="flex flex-row items-center justify-between">
+                            <div className="p-1 flex flex-row items-center">
+                              <Switch
+                                id={addOn.id}
+                                checked={addOnState[addOn.id].selected}
+                                disabled={!addOnState[addOn.id].enabled}
+                                onCheckedChange={() => {
+                                  toggleAddOn(addOn.id)
+                                }}
+                              />
+                              <Label
+                                htmlFor={addOn.id}
+                                className="pl-2 font-semibold text-gray-300 flex items-center gap-2"
+                              >
+                                {addOn.smallLogo && (
+                                  <img
+                                    src={`data:image/svg+xml,${encodeURIComponent(
+                                      addOn.smallLogo,
+                                    )}`}
+                                    alt={addOn.name}
+                                    className="w-5"
+                                  />
+                                )}
+                                {addOn.name}
+                              </Label>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              {addOnState[addOn.id].selected &&
+                                addOn.options &&
+                                Object.keys(addOn.options).length > 0 && (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-6 w-6 p-0 text-gray-600 hover:text-gray-400"
+                                    onClick={() => setConfigAddOn(addOn)}
+                                    disabled={!addOnState[addOn.id].enabled}
+                                  >
+                                    <SettingsIcon className="w-4 h-4" />
+                                  </Button>
+                                )}
+                              <InfoIcon
+                                className="w-4 text-gray-600 cursor-pointer hover:text-gray-400"
+                                onClick={() => setInfoAddOn(addOn)}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
               </div>
-            </div>
-          )}
-        </Fragment>
-      ))}
+            )}
+          </Fragment>
+        ))}
+      </div>
       <div className="mt-4">
         <ImportCustomAddOn />
       </div>

package/src/store/project.ts

@@ -23,6 +23,7 @@ export const useProjectOptions = create<
   tailwind: true,
   git: true,
   chosenAddOns: [],
+  addOnOptions: {},
   packageManager: 'pnpm',
 }))
 
@@ -179,11 +180,33 @@ export function useAddOns() {
         }
       }
     },
-    [ready, addOnState],
+    [ready, addOnState, availableAddOns],
   )
 
+  const setAddOnOption = useCallback(
+    (addOnId: string, optionName: string, value: any) => {
+      if (!ready) return
+      useProjectOptions.setState((state) => ({
+        addOnOptions: {
+          ...state.addOnOptions,
+          [addOnId]: {
+            ...state.addOnOptions[addOnId],
+            [optionName]: value,
+          },
+        },
+      }))
+    },
+    [ready],
+  )
+
+  const getAddOnOptions = useCallback((addOnId: string) => {
+    return useProjectOptions.getState().addOnOptions[addOnId] || {}
+  }, [])
+
   return {
     toggleAddOn,
+    setAddOnOption,
+    getAddOnOptions,
     chosenAddOns,
     availableAddOns,
     userSelectedAddOns,

package/src/types.d.ts

@@ -1,4 +1,4 @@
-import type { StatusStepType } from '@tanstack/cta-engine'
+import type { StatusStepType, AddOnOption, AddOnOptions } from '@tanstack/cta-engine'
 
 export type ApplicationMode = 'add' | 'setup' | 'none'
 
@@ -38,6 +38,7 @@ export type AddOnInfo = {
   logo?: string
   link: string
   dependsOn?: Array<string>
+  options?: AddOnOptions
 }
 
 export type FileClass =