termcast 1.3.9

package/src/components/loading-bar.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'
+import { BoxRenderable } from '@opentui/core'
+import {} from '@opentui/react'
+import { Theme } from 'termcast/src/theme'
+import { logger } from 'termcast/src/logger'
+
+interface LoadingBarProps {
+  title: string
+  isLoading?: boolean
+  barLength?: number
+}
+
+export function LoadingBar(props: LoadingBarProps): any {
+  let { title, isLoading = false, barLength: propBarLength } = props
+  const [position, setPosition] = useState(0)
+  const [calculatedBarLength, setCalculatedBarLength] = useState(
+    propBarLength || 0,
+  )
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+  const containerRef = useRef<BoxRenderable>(null)
+
+  // Calculate bar length based on container width
+  useLayoutEffect(() => {
+    if (containerRef.current) {
+      // TODO i am using the full terminal width for now. it would be better to use the box width for real instead
+      const containerWidth = containerRef.current.ctx.width - 4
+
+      // logger.log('LoadingBar container width:', containerWidth)
+      if (!containerWidth) return
+      // Account for padding (1 on each side) and the title length + space
+      const availableWidth = containerWidth - 2 - title.length - 1
+
+      const calculatedLength = Math.max(availableWidth, 10) // Minimum bar length of 10
+
+      setCalculatedBarLength(calculatedLength)
+    }
+  }, [title, propBarLength])
+
+  // Create the full text including title and bar
+  const barLength = propBarLength || calculatedBarLength
+  const bar = '─'.repeat(barLength)
+  const fullText = `${title} ${bar}`
+  const characters = fullText.split('')
+
+  // Define gradient colors using xterm-256 colors for consistency
+  const waveColors = [
+    '#585858', // xterm 240
+    '#585858', // xterm 240
+    '#6c6c6c', // xterm 242
+    '#6c6c6c', // xterm 242
+    '#808080', // xterm 244
+    '#808080', // xterm 244
+    '#949494', // xterm 246
+    '#949494', // xterm 246
+    '#a8a8a8', // xterm 248
+    '#a8a8a8', // xterm 248
+    '#bcbcbc', // xterm 250
+    '#bcbcbc', // xterm 250
+    '#d0d0d0', // xterm 252
+    '#d0d0d0', // xterm 252
+    '#bcbcbc', // xterm 250
+    '#bcbcbc', // xterm 250
+    '#a8a8a8', // xterm 248
+    '#a8a8a8', // xterm 248
+    '#949494', // xterm 246
+    '#949494', // xterm 246
+    '#808080', // xterm 244
+    '#808080', // xterm 244
+    '#6c6c6c', // xterm 242
+    '#6c6c6c', // xterm 242
+    '#585858', // xterm 240
+    '#585858', // xterm 240
+  ]
+
+  const waveWidth = waveColors.length
+
+  useEffect(() => {
+    if (isLoading) {
+      intervalRef.current = setInterval(() => {
+        setPosition((prev) => (prev + 1) % (characters.length + waveWidth))
+      }, 10)
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+      setPosition(0)
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [isLoading, characters.length, waveWidth])
+
+  // Calculate color for each character
+  const getCharacterColor = (index: number): string => {
+    if (!isLoading) {
+      // When not loading, use default theme colors
+      return index < title.length ? Theme.text : '#626262'
+    }
+
+    // Title text stays static when loading, only animate the bar
+    if (index < title.length) {
+      return Theme.textMuted // Keep title text muted during loading
+    }
+
+    // Only animate the bar part
+    const barIndex = index - title.length - 1 // Adjust for space after title
+    const distance = position - barIndex
+
+    // If character is within the wave (behind the current position)
+    if (distance >= 0 && distance < waveWidth) {
+      return waveColors[distance]
+    }
+
+    // Default muted color for characters outside the wave (xterm 241)
+    return '#626262'
+  }
+
+  return (
+    <box
+      ref={(el) => {
+        containerRef.current = el
+      }}
+      style={{
+        flexDirection: 'row',
+        flexGrow: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+    >
+      {characters.map((char, index) => (
+        <text key={index} fg={getCharacterColor(index)}>
+          {char}
+        </text>
+      ))}
+    </box>
+  )
+}

package/src/components/menubar-extra.tsx

@@ -0,0 +1,181 @@
+/**
+ * MenuBarExtra Component - Creates menu bar extensions for macOS
+ *
+ * Raycast Docs: https://developers.raycast.com/api-reference/menu-bar-commands
+ *
+ * MenuBarExtra allows you to create persistent menu bar items in macOS that can
+ * display information and provide quick actions without opening the main Raycast window.
+ *
+ * Key features:
+ * - Display text/icons in the menu bar
+ * - Show dropdown menus with items, sections, and submenus
+ * - Handle user interactions via onAction callbacks
+ * - Support for keyboard shortcuts
+ * - Loading states and tooltips
+ *
+ * Components:
+ * - MenuBarExtra: Root component for menu bar extensions
+ * - MenuBarExtra.Item: Individual menu items with optional actions
+ * - MenuBarExtra.Section: Group related items with optional title
+ * - MenuBarExtra.Submenu: Nested menu for organizing items hierarchically
+ * - MenuBarExtra.Separator: Visual separator between items
+ */
+
+import React, { ReactNode } from 'react'
+import { Image, ImageLike } from 'termcast/src/components/image'
+import { logger } from 'termcast/src/logger'
+
+export interface MenuBarExtraProps {
+  isLoading?: boolean
+  title?: string
+  tooltip?: string
+  icon?: ImageLike
+  children?: ReactNode
+}
+
+export interface MenuBarExtraItemProps {
+  title: string
+  subtitle?: string
+  icon?: ImageLike
+  tooltip?: string
+  shortcut?: { modifiers: string[]; key: string }
+  onAction?: (event?: MenuBarExtraActionEvent) => void
+  disabled?: boolean
+  children?: ReactNode
+}
+
+export interface MenuBarExtraSeparatorProps {}
+
+export interface MenuBarExtraSubmenuProps {
+  title: string
+  icon?: ImageLike
+  children?: ReactNode
+}
+
+export interface MenuBarExtraSectionProps {
+  title?: string
+  children?: ReactNode
+}
+
+export interface MenuBarExtraActionEvent {
+  type: 'left-click' | 'right-click'
+}
+
+interface MenuBarExtraType {
+  (props: MenuBarExtraProps): any
+  Item: (props: MenuBarExtraItemProps) => any
+  Separator: (props: MenuBarExtraSeparatorProps) => any
+  Submenu: (props: MenuBarExtraSubmenuProps) => any
+  Section: (props: MenuBarExtraSectionProps) => any
+}
+
+const MenuBarExtra: MenuBarExtraType = ({
+  isLoading,
+  title,
+  tooltip,
+  icon,
+  children,
+}) => {
+  logger.log('MenuBarExtra rendered', { isLoading, title, tooltip })
+
+  // TODO: Implement actual menu bar integration
+  // This component should:
+  // 1. Create a real macOS menu bar item
+  // 2. Handle menu dropdown display/hide
+  // 3. Position the menu correctly below the menu bar icon
+  // Currently just renders content in the terminal
+
+  return (
+    <box>
+      {title && (
+        <box>
+          {icon &&
+            (typeof icon === 'string' ? (
+              <text>{icon}</text>
+            ) : (
+              <Image source={icon} />
+            ))}
+          <text>{title}</text>
+        </box>
+      )}
+      {tooltip && <text>{tooltip}</text>}
+      {children}
+    </box>
+  )
+}
+
+MenuBarExtra.Item = ({
+  title,
+  subtitle,
+  icon,
+  tooltip,
+  shortcut,
+  onAction,
+  disabled,
+  children,
+}) => {
+  // TODO: Implement real click/keyboard handling for menu items
+  // OpenTUI doesn't support onClick on box elements yet
+  // This should handle:
+  // 1. Mouse clicks on the menu item
+  // 2. Keyboard navigation and selection (Enter key)
+  // 3. Keyboard shortcuts defined in shortcut prop
+  if (onAction) {
+    logger.log('MenuBarExtra.Item would handle action', { title })
+  }
+
+  return (
+    <box>
+      <box>
+        {icon &&
+          (typeof icon === 'string' ? (
+            <text>{icon}</text>
+          ) : (
+            <Image source={icon} />
+          ))}
+        <text>{disabled ? `[${title}]` : title}</text>
+        {subtitle && <text> {subtitle}</text>}
+      </box>
+      {shortcut && (
+        <text>
+          {shortcut.modifiers.join('')}
+          {shortcut.key}
+        </text>
+      )}
+      {children}
+    </box>
+  )
+}
+
+MenuBarExtra.Separator = () => {
+  return <text>─────────────────</text>
+}
+
+MenuBarExtra.Submenu = ({ title, icon, children }) => {
+  return (
+    <box>
+      <box>
+        {icon &&
+          (typeof icon === 'string' ? (
+            <text>{icon}</text>
+          ) : (
+            <Image source={icon} />
+          ))}
+        <text>{title} ▶</text>
+      </box>
+      {children && <box>{children}</box>}
+    </box>
+  )
+}
+
+MenuBarExtra.Section = ({ title, children }) => {
+  return (
+    <box>
+      {title && <text>{title}</text>}
+      {children}
+      <MenuBarExtra.Separator />
+    </box>
+  )
+}
+
+export { MenuBarExtra }

package/src/descendants.tsx

@@ -0,0 +1,134 @@
+// inspired by https://github.com/pacocoursey/use-descendants
+//
+import * as React from 'react'
+
+type DescendantMap<T> = { [id: string]: { index: number; props?: T } }
+
+export interface DescendantContextType<T> {
+  getIndexForId: (id: string, props?: T) => number
+  // IMPORTANT! map is not reactive, it cannot be used in render, only in useEffect or useLayoutEffect or other event handlers like useKeyboard
+  map: React.RefObject<DescendantMap<T>>
+  reset: () => void
+}
+
+const randomId = () => Math.random().toString(36).slice(2, 11)
+
+export function createDescendants<T = any>() {
+  const DescendantContext = React.createContext<
+    DescendantContextType<T> | undefined
+  >(undefined)
+
+  function DescendantsProvider(props: {
+    value: DescendantContextType<T>
+    children: React.ReactNode
+  }) {
+    // On every re-render of children, reset the count
+    props.value.reset()
+
+    return (
+      <DescendantContext.Provider value={props.value}>
+        {props.children}
+      </DescendantContext.Provider>
+    )
+  }
+
+  const useDescendants = (): DescendantContextType<T> => {
+    const indexCounter = React.useRef<number>(0)
+    const map = React.useRef<DescendantMap<T>>({})
+
+    const reset = () => {
+      indexCounter.current = 0
+      map.current = {}
+    }
+
+    const getIndexForId = (id: string, props?: T) => {
+      if (!map.current[id])
+        map.current[id] = {
+          index: indexCounter.current++,
+        }
+      map.current[id].props = props
+      return map.current[id].index
+    }
+
+    // React.useEffect(() => {
+    //   return () => {
+    //     reset()
+    //   }
+    // }, [])
+
+    // Do NOT memoize context value, so that we bypass React.memo on any children
+    // We NEED them to re-render, in case stable children were re-ordered
+    // (this creates a new object every render, so children reading the context MUST re-render)
+    return { getIndexForId, map, reset }
+  }
+
+  /**
+   * Return index of the current item within its parent's list
+   */
+  function useDescendant(props?: T) {
+    const context = React.useContext(DescendantContext)
+    const [descendantId] = React.useState<string>(() => randomId())
+    const [index, setIndex] = React.useState<number>(-1)
+
+    React.useLayoutEffect(() => {
+      // Do this inside of useLayoutEffect, it's only
+      // called for the "real render" in React strict mode
+      setIndex(context?.getIndexForId(descendantId, props) ?? -1)
+    })
+
+    return { descendantId, index }
+  }
+
+  return { DescendantsProvider, useDescendants, useDescendant }
+}
+
+// EXAMPLE
+const { DescendantsProvider, useDescendants, useDescendant } =
+  createDescendants<{
+    title?: string
+  }>()
+
+const FilteredIndexesContext = React.createContext<number[]>([])
+
+const MenuExample = () => {
+  const context = useDescendants()
+  const [search, setSearchRaw] = React.useState('')
+  const [filteredIndexes, setFilteredIndexes] = React.useState<number[]>([])
+
+  // Filtering logic is now in this wrapper
+  const setSearch = (value: string) => {
+    setSearchRaw(value)
+    const items = Object.entries(context.map.current)
+    const filtered = items
+      .filter(([, item]) =>
+        item.props?.title?.toLowerCase().includes(value.toLowerCase()),
+      )
+      .map(([, item]) => item.index)
+    setFilteredIndexes(filtered)
+  }
+
+  return (
+    <DescendantsProvider value={context}>
+      <FilteredIndexesContext.Provider value={filteredIndexes}>
+        <box>
+          <input value={search} onInput={setSearch} placeholder='Search...' />
+          <Item title='First Item' />
+          <Item title='Second Item' />
+          <Item title='Third Item' />
+        </box>
+      </FilteredIndexesContext.Provider>
+    </DescendantsProvider>
+  )
+}
+
+const Item = ({ title }: { title: string }) => {
+  const { index } = useDescendant({ title })
+  const filteredIndexes = React.useContext(FilteredIndexesContext)
+
+  // If index is not in filteredIndexes, don't render
+  if (!filteredIndexes.includes(index)) {
+    return null
+  }
+
+  return <text>{title}</text>
+}