termcast 1.3.9 → 1.3.16

package/src/extensions/home.tsx

@@ -1,16 +1,17 @@
 import fs from 'node:fs'
 import React from 'react'
-import { render } from '@opentui/react'
+import { createRoot } from '@opentui/react'
+import { createCliRenderer } from '@opentui/core'
 import { List, logger, useStore } from 'termcast'
 import { Action, ActionPanel } from 'termcast'
 import { useNavigation } from 'termcast/src/internal/navigation'
-import { Providers } from 'termcast/src/internal/providers'
+import { TermcastProvider } from 'termcast/src/internal/providers'
 import { showToast, Toast } from 'termcast/src/apis/toast'
 import { Icon } from 'termcast'
 import { getStoredExtensions } from '../utils'
 import Store from './store'
 import { ExtensionPreferences } from '../components/extension-preferences'
-import { LocalStorage } from 'termcast/src/apis/localstorage'
+import { runCommand, clearCommandArguments } from '../utils/run-command'
 import '../globals'
 
 interface ExtensionCommand {
@@ -49,8 +50,17 @@ function ExtensionsList({
   const [searchText, setSearchText] = React.useState(initialSearchQuery)
 
   const handleCommandSelect = async (item: ExtensionCommand) => {
+    clearCommandArguments()
+
     try {
-      await runCommand(item)
+      await runCommand({
+        command: item.command,
+        extensionName: item.extensionName,
+        packageJson: item.packageJson,
+        bundledPath: item.bundledPath,
+        Component: item.Component,
+        push,
+      })
     } catch (error: any) {
       await showToast({
         style: Toast.Style.Failure,
@@ -60,116 +70,6 @@ function ExtensionsList({
     }
   }
 
-  const runCommand = async (item: ExtensionCommand) => {
-    // Check if command has required preferences that are missing
-    const checkRequiredPreferences = async (): Promise<{
-      hasRequiredPreferences: boolean
-      requiredPreferences?: 'command' | 'extension'
-    }> => {
-      // Get package.json to check required preferences
-      if (!item.bundledPath || item.Component || !item.packageJson) {
-        // Built-in commands or commands without packageJson don't have preferences
-        return { hasRequiredPreferences: true }
-      }
-
-      const packageJson = item.packageJson
-
-      // Check command-specific preferences
-      const command = packageJson.commands?.find(
-        (cmd: any) => cmd.name === item.command.name,
-      )
-      const commandPrefs = command?.preferences || []
-
-      // Check extension-wide preferences
-      const extensionPrefs = packageJson.preferences || []
-
-      // Get saved preferences
-      const commandPrefsKey = `preferences.${item.extensionName}.${item.command.name}`
-      const extensionPrefsKey = `preferences.${item.extensionName}`
-
-      const savedCommandPrefs = await LocalStorage.getItem(commandPrefsKey)
-      const savedExtensionPrefs = await LocalStorage.getItem(extensionPrefsKey)
-
-      const parsedCommandPrefs = savedCommandPrefs
-        ? JSON.parse(savedCommandPrefs as string)
-        : {}
-      const parsedExtensionPrefs = savedExtensionPrefs
-        ? JSON.parse(savedExtensionPrefs as string)
-        : {}
-
-      // Check if all required command preferences are set
-      for (const pref of commandPrefs) {
-        if (pref.required && parsedCommandPrefs[pref.name] == null) {
-          return {
-            hasRequiredPreferences: false,
-            requiredPreferences: 'command',
-          }
-        }
-      }
-
-      // Check if all required extension preferences are set
-      for (const pref of extensionPrefs) {
-        if (pref.required && parsedExtensionPrefs[pref.name] == null) {
-          return {
-            hasRequiredPreferences: false,
-            requiredPreferences: 'extension',
-          }
-        }
-      }
-
-      return { hasRequiredPreferences: true }
-    }
-
-    const prefsCheck = await checkRequiredPreferences()
-
-    if (!prefsCheck.hasRequiredPreferences) {
-      // TODO: Use replace instead of push to avoid stacking navigation
-      // Redirect to preferences with onSubmit to run command after
-      push(
-        <ExtensionPreferences
-          extensionName={item.extensionName}
-          commandName={
-            prefsCheck.requiredPreferences === 'command'
-              ? item.command.name
-              : undefined
-          }
-          onSubmit={() => {
-            // Recursively run command after preferences are set
-            runCommand(item)
-          }}
-        />,
-      )
-      return
-    }
-
-    let Component: (() => any) | undefined
-
-    if (item.Component) {
-      Component = item.Component
-    } else if (item.bundledPath) {
-      const module = await import(item.bundledPath)
-      Component = module.default
-
-      if (!Component) {
-        await showToast({
-          style: Toast.Style.Failure,
-          title: 'No default export',
-          message: `Command file ${item.command.name} has no default export`,
-        })
-        return
-      }
-    } else {
-      await showToast({
-        style: Toast.Style.Failure,
-        title: 'Command not available',
-        message: `Command ${item.command.name} has no implementation`,
-      })
-      return
-    }
-
-    push(<Component />)
-  }
-
   // Group commands by extension
   const groupedByExtension = allCommands.reduce(
     (acc, cmd) => {
@@ -229,8 +129,7 @@ function ExtensionsList({
                           <ExtensionPreferences
                             extensionName={item.extensionName}
                             onSubmit={() => {
-                              // After configuring extension preferences, try to run the command
-                              runCommand(item)
+                              handleCommandSelect(item)
                             }}
                           />,
                         )
@@ -244,8 +143,7 @@ function ExtensionsList({
                             extensionName={item.extensionName}
                             commandName={item.command.name}
                             onSubmit={() => {
-                              // After configuring command preferences, try to run the command
-                              runCommand(item)
+                              handleCommandSelect(item)
                             }}
                           />,
                         )
@@ -284,10 +182,11 @@ function ExtensionsList({
 export async function runHomeCommand(): Promise<void> {
   logger.log(`preparing to render the home command component`)
 
-  await render(
-    <Providers>
+  const renderer = await createCliRenderer()
+  createRoot(renderer).render(
+    <TermcastProvider>
       <Home />
-    </Providers>,
+    </TermcastProvider>,
   )
   logger.log(`rendered home command component`)
 }

package/src/globals.ts

@@ -9,7 +9,7 @@ import * as opentuiCore from '@opentui/core'
 import * as opentuiReact from '@opentui/react'
 import * as react from 'react'
 import * as reactJsxRuntime from 'react/jsx-runtime'
-import * as termcastApi from 'termcast'
+import * as termcastApi from './index'
 
 declare global {
   var opentuiCore: typeof opentuiCore

package/src/index.tsx

@@ -95,11 +95,7 @@ export type {
 } from 'termcast/src/components/form/types'
 
 // Icons and Images
-export {
-  Icon,
-  getIconEmoji,
-  IconComponent,
-} from 'termcast/src/components/icon'
+export { Icon, getIconEmoji, getIconShape, IconComponent } from 'termcast/src/components/icon'
 export { Image, ImageMask } from 'termcast/src/components/image'
 export type {
   ImageProps,
@@ -111,6 +107,9 @@ export type {
 // Alerts
 export { Alert, confirmAlert } from 'termcast/src/components/alert'
 
+// Command Arguments
+export { CommandArguments } from 'termcast/src/components/command-arguments'
+
 // MenuBar
 export { MenuBarExtra } from 'termcast/src/components/menubar-extra'
 export type {
@@ -138,29 +137,17 @@ export {
 } from 'termcast/src/internal/navigation'
 
 // Hooks
-export {
-  useActionPanel,
-  useId,
-  useUnstableAI,
-} from 'termcast/src/hooks/index'
+export { useActionPanel, useId, useUnstableAI } from 'termcast/src/hooks/index'
 export type { ActionPanelState } from 'termcast/src/hooks/index'
 
 // Focus Context
 export { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 
 // Dialog
-export {
-  Dialog,
-  DialogProvider,
-  useDialog,
-} from 'termcast/src/internal/dialog'
+export { Dialog, DialogProvider, useDialog } from 'termcast/src/internal/dialog'
 
 // Toast
-export {
-  Toast,
-  showToast,
-  showFailureToast,
-} from 'termcast/src/apis/toast'
+export { Toast, showToast, showFailureToast } from 'termcast/src/apis/toast'
 
 // Clipboard
 export {
@@ -199,10 +186,7 @@ export {
   getSelectedFinderItems,
   getSelectedText,
 } from 'termcast/src/apis/environment'
-export type {
-  Environment,
-  LaunchProps,
-} from 'termcast/src/apis/environment'
+export type { Environment, LaunchProps } from 'termcast/src/apis/environment'
 
 export { LaunchType }
 
@@ -228,7 +212,7 @@ export { useStore } from 'termcast/src/state'
 export type { DialogPosition } from 'termcast/src/state'
 
 // Providers (for app setup)
-export { Providers } from 'termcast/src/internal/providers'
+export { TermcastProvider } from 'termcast/src/internal/providers'
 
 // Helper function for rendering examples
 export { renderWithProviders } from 'termcast/src/utils'
@@ -238,3 +222,6 @@ export { closeMainWindow, PopToRootType } from 'termcast/src/apis/window'
 
 // HUD
 export { showHUD } from 'termcast/src/apis/hud'
+
+// Compile support
+export { startCompiledExtension } from 'termcast/src/extensions/dev'

package/src/internal/date-picker-widget.tsx

@@ -291,40 +291,41 @@ export function DatePickerWidget({
           setFocus('grid')
         }
         break
-      case 'tab':
-        if (key.shift) {
-          if (focus === 'year') {
-            // At top of widget, trigger callback or cycle to bottom
-            if (onFirstRowUpKey) {
-              onFirstRowUpKey()
-            } else {
-              // Cycle to grid if no callback
-              setFocus('grid')
-            }
-          } else {
-            // Shift+Tab: Move focus up (grid -> month -> year)
-            setFocus((f) =>
-              f === 'grid' ? 'month' : f === 'month' ? 'year' : 'year',
-            )
-          }
-        } else {
-          if (focus === 'grid') {
-            // At bottom of widget, trigger callback or cycle to top
-            if (onLastRowDownKey) {
-              onLastRowDownKey()
-            } else {
-              // Cycle to year if no callback
-              setFocus('year')
-            }
-          } else {
-            // Tab: Move focus down (year -> month -> grid)
-            setFocus((f) =>
-              f === 'year' ? 'month' : f === 'month' ? 'grid' : 'grid',
-            )
-          }
-        }
-        break
+      // case 'tab':
+      //   if (key.shift) {
+      //     if (focus === 'year') {
+      //       // At top of widget, trigger callback or cycle to bottom
+      //       if (onFirstRowUpKey) {
+      //         onFirstRowUpKey()
+      //       } else {
+      //         // Cycle to grid if no callback
+      //         setFocus('grid')
+      //       }
+      //     } else {
+      //       // Shift+Tab: Move focus up (grid -> month -> year)
+      //       setFocus((f) =>
+      //         f === 'grid' ? 'month' : f === 'month' ? 'year' : 'year',
+      //       )
+      //     }
+      //   } else {
+      //     if (focus === 'grid') {
+      //       // At bottom of widget, trigger callback or cycle to top
+      //       if (onLastRowDownKey) {
+      //         onLastRowDownKey()
+      //       } else {
+      //         // Cycle to year if no callback
+      //         setFocus('year')
+      //       }
+      //     } else {
+      //       // Tab: Move focus down (year -> month -> grid)
+      //       setFocus((f) =>
+      //         f === 'year' ? 'month' : f === 'month' ? 'grid' : 'grid',
+      //       )
+      //     }
+      //   }
+      //   break
       case 'return': // Enter key
+      case 'space': // Space key
         if (focus === 'grid' && onChange) {
           onChange(selected)
         }
@@ -357,7 +358,9 @@ export function DatePickerWidget({
       style={{
         flexDirection: 'column',
         alignItems: 'flex-start',
-        padding: 1,
+        paddingTop: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
       }}
     >
       {/* Year (line 1) */}
@@ -439,7 +442,7 @@ export function DatePickerWidget({
       </box>
 
       {/* Days grid: 7 columns x 6 rows, same fixed-box strategy */}
-      <box style={{ flexDirection: 'column', minHeight: 6 }}>
+      <box style={{ flexDirection: 'column' }}>
         {filteredWeeks.map((row, i) => {
           // Skip empty rows
           if (row.every((d) => d === null)) return null
@@ -455,7 +458,8 @@ export function DatePickerWidget({
                   )
                 }
 
-                const isSel = sameDay(d, selected)
+                const isCursor = sameDay(d, selected)
+                const isValue = initialValue ? sameDay(d, initialValue) : false
                 const isToday = sameDay(d, today)
                 return (
                   <box
@@ -463,11 +467,14 @@ export function DatePickerWidget({
                     style={{
                       ...cellStyle,
                       backgroundColor:
-                        enableColors && isSel && focus === 'grid'
+                        focus !== 'grid' ? 'transparent' :
+                        enableColors && isCursor
                           ? Theme.primary
-                          : enableColors && isToday
-                            ? Theme.backgroundPanel
-                            : undefined,
+                          : isValue
+                            ? Theme.selectedMuted
+                            : enableColors && isToday
+                              ? Theme.backgroundPanel
+                              : undefined,
                     }}
                     onMouseDown={() => {
                       setSelected(d)
@@ -477,13 +484,16 @@ export function DatePickerWidget({
                   >
                     <text
                       fg={
-                        isSel && focus === 'grid'
+
+                        enableColors && isCursor
                           ? Theme.text
-                          : enableColors && isToday
-                            ? Theme.accent
-                            : enableColors && (j === 5 || j === 6)
-                              ? Theme.error
-                              : Theme.text
+                          : isValue
+                            ? Theme.text
+                            : enableColors && isToday
+                              ? Theme.accent
+                              : enableColors && (j === 5 || j === 6)
+                                ? Theme.error
+                                : Theme.text
                       }
                     >
                       {String(d.getDate()).padStart(2, ' ')}

package/src/internal/dialog.tsx

@@ -1,7 +1,6 @@
 import { useKeyboard, useTerminalDimensions } from '@opentui/react'
 import React, { type ReactNode, useRef } from 'react'
 import { Theme } from 'termcast/src/theme'
-import { RGBA } from '@opentui/core'
 import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { CommonProps } from 'termcast/src/utils'
 import {
@@ -10,12 +9,13 @@ import {
   type DialogStackItem,
 } from 'termcast/src/state'
 import { logger } from '../logger'
+import { ToastOverlay } from 'termcast/src/apis/toast'
 
 const Border = {
-  topLeft: '┃',
-  topRight: '┃',
-  bottomLeft: '┃',
-  bottomRight: '┃',
+  topLeft: '',
+  topRight: '',
+  bottomLeft: '',
+  bottomRight: '',
   horizontal: '',
   vertical: '┃',
   topT: '+',
@@ -104,7 +104,6 @@ export function Dialog({
       paddingRight={positionStyles.paddingRight}
       left={0}
       top={0}
-      backgroundColor={RGBA.fromInts(0, 0, 0, 150)}
       onMouseDown={handleBackdropClick}
     >
       <box
@@ -171,6 +170,7 @@ export function DialogProvider(props: DialogProviderProps): any {
           })}
         </box>
       )}
+      <ToastOverlay />
     </>
   )
 }

package/src/internal/providers.tsx

@@ -406,7 +406,7 @@ function ErrorDisplay({
 
 const ErrorBoundary = ErrorBoundaryClass as any
 
-export function Providers(props: ProvidersProps): any {
+export function TermcastProvider(props: ProvidersProps): any {
   return (
     <ErrorBoundary>
       <Suspense fallback={<LoadingFallback />}>

package/src/internal/scrollbox.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import Theme from '../theme'
+
+interface ScrollBoxProps {
+  children?: React.ReactNode
+  focused?: boolean
+  flexGrow?: number
+  flexShrink?: number
+  style?: any
+  ref?: React.Ref<any>
+}
+
+export function ScrollBox({
+  children,
+  focused = false,
+  flexGrow,
+  flexShrink,
+  style,
+  ref,
+  ...props
+}: ScrollBoxProps): any {
+  return (
+    <scrollbox
+      ref={ref}
+      focused={focused}
+      flexGrow={flexGrow}
+      flexShrink={flexShrink}
+      style={{
+        rootOptions: {
+          // backgroundColor: '#1a1b26',
+          ...(style?.rootOptions || {}),
+        },
+        viewportOptions: {
+          flexGrow: 1,
+          flexShrink: 1,
+          paddingRight: 1,
+          ...(style?.viewportOptions || {}),
+        },
+        contentOptions: {
+          flexShrink: 0,
+          ...(style?.contentOptions || {}),
+        },
+        scrollbarOptions: {
+          // visible: true,
+          // showArrows: true,
+          trackOptions: {
+            foregroundColor: Theme.textMuted,
+
+            // backgroundColor: '#414868',
+          },
+          ...(style?.scrollbarOptions || {}),
+        },
+        horizontalScrollbarOptions: {
+          visible: false,
+          ...(style?.horizontalScrollbarOptions || {}),
+        },
+      }}
+      {...props}
+    >
+      {children}
+    </scrollbox>
+  )
+}