@tanstack/cta-ui-base 0.32.3 → 0.33.2

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

@@ -4,7 +4,7 @@ import { InfoIcon, SettingsIcon } from 'lucide-react';
 import { Switch } from '../ui/switch';
 import { Label } from '../ui/label';
 import { Button } from '../ui/button';
-import { useAddOns, useProjectOptions } from '../../store/project';
+import { useAddOns, useProjectOptions, useShowHostingOptions, } from '../../store/project';
 import ImportCustomAddOn from '../custom-add-on-dialog';
 import AddOnInfoDialog from '../add-on-info-dialog';
 import AddOnConfigDialog from '../add-on-config-dialog';
@@ -15,11 +15,18 @@ const addOnTypeLabels = {
     example: 'Example',
 };
 export default function SelectedAddOns() {
+    const showHostingOptions = useShowHostingOptions();
     const { availableAddOns, addOnState, toggleAddOn, setAddOnOption } = useAddOns();
     const addOnOptions = useProjectOptions((state) => state.addOnOptions);
+    console.log('showHostingOptions', showHostingOptions);
     const sortedAddOns = useMemo(() => {
         return availableAddOns.sort((a, b) => {
-            return a.name.localeCompare(b.name);
+            const aPriority = a.priority ?? 0;
+            const bPriority = b.priority ?? 0;
+            if (bPriority !== aPriority) {
+                return bPriority - aPriority; // Higher priority first
+            }
+            return a.name.localeCompare(b.name); // Fallback to alphabetical
         });
     }, [availableAddOns]);
     const [infoAddOn, setInfoAddOn] = useState();
@@ -28,7 +35,10 @@ export default function SelectedAddOns() {
                     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
+                }, 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)
+                    .filter((type) => (showHostingOptions ? true : type !== 'host'))
+                    .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);

package/dist/hooks/use-webcontainer-store.js

@@ -1,7 +1,6 @@
 import { WebContainer } from '@webcontainer/api';
 import { createStore } from 'zustand';
 import shimALS from '../lib/als-shim';
-console.log('>>> startup');
 const processTerminalLine = (data) => {
     // Clean up terminal output - remove ANSI codes and control characters
     let cleaned = data;

package/dist/store/project.d.ts

@@ -13,6 +13,7 @@ export declare const useOriginalOutput: () => any;
 export declare const useOriginalOptions: () => any;
 export declare const useOriginalSelectedAddOns: () => any;
 export declare const useApplicationMode: () => import("../types").ApplicationMode | undefined;
+export declare const useShowHostingOptions: () => boolean | undefined;
 export declare const useAddOnsByMode: () => Record<string, AddOnInfo[]> | undefined;
 export declare const useSupportedModes: () => Record<string, {
     displayName: string;

package/dist/store/project.js

@@ -33,6 +33,7 @@ export const useOriginalOutput = () => useInitialData().data?.output;
 export const useOriginalOptions = () => useInitialData().data?.options;
 export const useOriginalSelectedAddOns = () => useOriginalOptions()?.chosenAddOns;
 export const useApplicationMode = () => useInitialData().data?.applicationMode;
+export const useShowHostingOptions = () => useInitialData().data?.showHostingOptions;
 export const useAddOnsByMode = () => useInitialData().data?.addOns;
 export const useSupportedModes = () => useInitialData().data?.supportedModes;
 const useApplicationSettings = create(() => ({

package/package.json

@@ -37,7 +37,7 @@
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.0.2",
     "zustand": "^5.0.3",
-    "@tanstack/cta-engine": "0.32.3"
+    "@tanstack/cta-engine": "0.33.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
@@ -46,6 +46,6 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.1.4"
   },
-  "version": "0.32.3",
+  "version": "0.33.2",
   "scripts": {}
 }

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

@@ -5,7 +5,11 @@ import { Switch } from '../ui/switch'
 import { Label } from '../ui/label'
 import { Button } from '../ui/button'
 
-import { useAddOns, useProjectOptions } from '../../store/project'
+import {
+  useAddOns,
+  useProjectOptions,
+  useShowHostingOptions,
+} from '../../store/project'
 
 import ImportCustomAddOn from '../custom-add-on-dialog'
 import AddOnInfoDialog from '../add-on-info-dialog'
@@ -21,13 +25,21 @@ const addOnTypeLabels: Record<string, string> = {
 }
 
 export default function SelectedAddOns() {
+  const showHostingOptions = useShowHostingOptions()
   const { availableAddOns, addOnState, toggleAddOn, setAddOnOption } =
     useAddOns()
   const addOnOptions = useProjectOptions((state) => state.addOnOptions)
 
+  console.log('showHostingOptions', showHostingOptions)
+
   const sortedAddOns = useMemo(() => {
     return availableAddOns.sort((a, b) => {
-      return a.name.localeCompare(b.name)
+      const aPriority = a.priority ?? 0
+      const bPriority = b.priority ?? 0
+      if (bPriority !== aPriority) {
+        return bPriority - aPriority // Higher priority first
+      }
+      return a.name.localeCompare(b.name) // Fallback to alphabetical
     })
   }, [availableAddOns])
 
@@ -52,74 +64,77 @@ export default function SelectedAddOns() {
         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)}
-                              />
+        {Object.keys(addOnTypeLabels)
+          .filter((type) => (showHostingOptions ? true : type !== 'host'))
+          .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>
-              </div>
-            )}
-          </Fragment>
-        ))}
+              )}
+            </Fragment>
+          ))}
       </div>
       <div className="mt-4">
         <ImportCustomAddOn />

package/src/hooks/use-webcontainer-store.ts

@@ -12,8 +12,6 @@ export type SetupStep =
   | 'ready'
   | 'error'
 
-console.log('>>> startup')
-
 type WebContainerStore = {
   webContainer: Promise<WebContainer> | null
   ready: boolean

package/src/store/project.ts

@@ -48,6 +48,8 @@ export const useOriginalOptions = () => useInitialData().data?.options
 export const useOriginalSelectedAddOns = () =>
   useOriginalOptions()?.chosenAddOns
 export const useApplicationMode = () => useInitialData().data?.applicationMode
+export const useShowHostingOptions = () =>
+  useInitialData().data?.showHostingOptions
 export const useAddOnsByMode = () => useInitialData().data?.addOns
 export const useSupportedModes = () => useInitialData().data?.supportedModes
 

package/src/types.d.ts

@@ -1,4 +1,8 @@
-import type { StatusStepType, AddOnOption, AddOnOptions } from '@tanstack/cta-engine'
+import type {
+  StatusStepType,
+  AddOnOption,
+  AddOnOptions,
+} from '@tanstack/cta-engine'
 
 export type ApplicationMode = 'add' | 'setup' | 'none'
 
@@ -35,6 +39,7 @@ export type AddOnInfo = {
   type: 'add-on' | 'example' | 'starter' | 'toolchain' | 'host'
   modes: Array<string>
   smallLogo?: string
+  priority?: number
   logo?: string
   link: string
   dependsOn?: Array<string>
@@ -84,6 +89,7 @@ export type InitialData = {
   localFiles: Record<string, string>
   addOns: Record<string, Array<AddOnInfo>>
   applicationMode: ApplicationMode
+  showHostingOptions?: boolean
   forcedRouterMode?: string
   forcedAddOns?: Array<string>
   registry?: Registry | undefined