@tanstack/cta-ui-base 0.20.0 → 0.21.0

package/dist/app.d.ts

@@ -1 +1,10 @@
-export default function RootComponent(): import("react/jsx-runtime").JSX.Element;
+export interface RootComponentProps {
+    slots?: Partial<{
+        header: React.ReactNode;
+        sidebar: React.ReactNode;
+        fileNavigator: React.ReactNode;
+        startupDialog: React.ReactNode;
+    }>;
+}
+export declare const defaultSlots: RootComponentProps['slots'];
+export default function RootComponent(props: RootComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/app.js

@@ -5,6 +5,13 @@ import { BackgroundAnimation } from './components/background-animation';
 import FileNavigator from './components/file-navigator';
 import StartupDialog from './components/startup-dialog';
 import { CTAProvider } from './components/cta-provider';
-export default function RootComponent() {
-    return (_jsx(CTAProvider, { children: _jsxs("main", { className: "min-w-[1280px]", children: [_jsx(BackgroundAnimation, {}), _jsxs("div", { className: "min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container", children: [_jsx(AppHeader, {}), _jsxs("div", { className: "flex flex-row", children: [_jsx("div", { className: "w-1/3 @8xl:w-1/4 pr-2", children: _jsx(AppSidebar, {}) }), _jsx("div", { className: "w-2/3 @8xl:w-3/4 pl-2", children: _jsx(FileNavigator, {}) })] })] }), _jsx(StartupDialog, {})] }) }));
+export const defaultSlots = {
+    header: _jsx(AppHeader, {}),
+    sidebar: _jsx(AppSidebar, {}),
+    fileNavigator: _jsx(FileNavigator, {}),
+    startupDialog: _jsx(StartupDialog, {}),
+};
+export default function RootComponent(props) {
+    const slots = Object.assign({}, defaultSlots, props.slots);
+    return (_jsx(CTAProvider, { children: _jsxs("main", { className: "min-w-[1280px]", children: [_jsx(BackgroundAnimation, {}), _jsxs("div", { className: "min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container", children: [slots.header, _jsxs("div", { className: "flex flex-row", children: [_jsx("div", { className: "w-1/3 @8xl:w-1/4 pr-2", children: slots.sidebar }), _jsx("div", { className: "w-2/3 @8xl:w-3/4 pl-2", children: slots.fileNavigator })] })] }), slots.startupDialog] }) }));
 }

package/dist/components/cta-sidebar.d.ts

@@ -1 +1,7 @@
-export declare function AppSidebar(): import("react/jsx-runtime").JSX.Element;
+export interface SidebarProps {
+    slots?: {
+        actions: React.ReactNode;
+    };
+}
+export declare const DefaultAppSidebarActions: () => import("react/jsx-runtime").JSX.Element;
+export declare function AppSidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/cta-sidebar.js

@@ -8,8 +8,13 @@ import ModeSelector from './sidebar-items/mode-selector';
 import TypescriptSwitch from './sidebar-items/typescript-switch';
 import StarterDialog from './sidebar-items/starter';
 import SidebarGroup from './sidebar-items/sidebar-group';
-export function AppSidebar() {
+export const DefaultAppSidebarActions = () => (_jsxs("div", { className: "mt-5", children: [_jsx(RunAddOns, {}), _jsx(RunCreateApp, {})] }));
+const defaultSlots = {
+    actions: _jsx(DefaultAppSidebarActions, {}),
+};
+export function AppSidebar(props) {
     const ready = useReady();
     const mode = useApplicationMode();
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [ready && (_jsxs(_Fragment, { children: [mode === 'setup' && (_jsxs(SidebarGroup, { children: [_jsx(ProjectName, {}), _jsx(ModeSelector, {}), _jsx(TypescriptSwitch, {})] })), _jsx(SidebarGroup, { children: _jsx(SelectedAddOns, {}) }), mode === 'setup' && (_jsx(SidebarGroup, { children: _jsx(StarterDialog, {}) }))] })), _jsxs("div", { className: "mt-5", children: [_jsx(RunAddOns, {}), _jsx(RunCreateApp, {})] })] }));
+    const slots = Object.assign({}, defaultSlots, props.slots);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [ready && (_jsxs(_Fragment, { children: [mode === 'setup' && (_jsxs(SidebarGroup, { children: [_jsx(ProjectName, {}), _jsx(ModeSelector, {}), _jsx(TypescriptSwitch, {})] })), _jsx(SidebarGroup, { children: _jsx(SelectedAddOns, {}) }), mode === 'setup' && (_jsx(SidebarGroup, { children: _jsx(StarterDialog, {}) }))] })), slots.actions] }));
 }

package/package.json

@@ -45,6 +45,6 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.1.4"
   },
-  "version": "0.20.0",
+  "version": "0.21.0",
   "scripts": {}
 }

package/src/app.tsx

@@ -5,23 +5,41 @@ import FileNavigator from './components/file-navigator'
 import StartupDialog from './components/startup-dialog'
 import { CTAProvider } from './components/cta-provider'
 
-export default function RootComponent() {
+export interface RootComponentProps {
+  slots?: Partial<{
+    header: React.ReactNode
+    sidebar: React.ReactNode
+    fileNavigator: React.ReactNode
+    startupDialog: React.ReactNode
+  }>
+}
+
+export const defaultSlots: RootComponentProps['slots'] = {
+  header: <AppHeader />,
+  sidebar: <AppSidebar />,
+  fileNavigator: <FileNavigator />,
+  startupDialog: <StartupDialog />,
+}
+
+export default function RootComponent(props: RootComponentProps) {
+  const slots = Object.assign({}, defaultSlots, props.slots)
+
   return (
     <CTAProvider>
       <main className="min-w-[1280px]">
         <BackgroundAnimation />
         <div className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container">
-          <AppHeader />
+          {slots.header}
           <div className="flex flex-row">
             <div className="w-1/3 @8xl:w-1/4 pr-2">
-              <AppSidebar />
+              {slots.sidebar}
             </div>
             <div className="w-2/3 @8xl:w-3/4 pl-2">
-              <FileNavigator />
+              {slots.fileNavigator}
             </div>
           </div>
         </div>
-        <StartupDialog />
+        {slots.startupDialog}
       </main>
     </CTAProvider>
   )

package/src/components/cta-sidebar.tsx

@@ -9,9 +9,27 @@ import TypescriptSwitch from './sidebar-items/typescript-switch'
 import StarterDialog from './sidebar-items/starter'
 import SidebarGroup from './sidebar-items/sidebar-group'
 
-export function AppSidebar() {
+export interface SidebarProps {
+  slots?: {
+    actions: React.ReactNode
+  }
+}
+
+export const DefaultAppSidebarActions = () => (
+  <div className="mt-5">
+    <RunAddOns />
+    <RunCreateApp />
+  </div>
+)
+
+const defaultSlots: SidebarProps['slots'] = {
+  actions: <DefaultAppSidebarActions />,
+}
+
+export function AppSidebar(props: SidebarProps) {
   const ready = useReady()
   const mode = useApplicationMode()
+  const slots = Object.assign({}, defaultSlots, props.slots)
 
   return (
     <div className="flex flex-col gap-2">
@@ -34,10 +52,7 @@ export function AppSidebar() {
           )}
         </>
       )}
-      <div className="mt-5">
-        <RunAddOns />
-        <RunCreateApp />
-      </div>
+      {slots.actions}
     </div>
   )
 }

package/src/components/sidebar-items/run-create-app.tsx

@@ -20,6 +20,7 @@ import {
 import StatusList from '../status-list'
 import { createAppStreaming, shutdown } from '../../lib/api'
 
+
 export default function RunCreateApp() {
   const [isRunning, setIsRunning] = useState(false)
   const { streamItems, monitorStream, finished } = useStreamingStatus()

package/src/index.ts

@@ -41,4 +41,4 @@ export {
   useReady,
 }
 
-export default RootComponent
+export default RootComponent