feat(cta-ui-base): slot-based composition for RootComponent and AppSidebar (#153)

## Summary

Introduces slot APIs to make the UI shell composable and overridable.
Enables custom sidebar actions and host-app overrides (header, sidebar,
file navigator, startup dialog) without forking core components.

This is primarily in support of integrating the builder UI into
tanstack.com, but could be used for customizing the UI builder in other
contexts as wel.

Author: austin-liminal

packages/cta-ui-base/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>
   )

packages/cta-ui-base/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>
   )
 }

packages/cta-ui-base/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()

packages/cta-ui-base/src/index.ts

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