Workspace

import { Workspace, Views, ProjectChip, VIEWS, CHAT, DEVICES, CONTROL } from '@hanzo/ui/agents'

export function Builder() {
  const [view, setView] = useState('preview')
  const [device, setDevice] = useState('desktop')
  const [collapsed, setCollapsed] = useState(false)
  const [dock, setDock] = useState(36)
  return (
    <YStack width="100%" height={560} borderWidth={1} borderColor="$borderColor" rounded="$4" overflow="hidden">
      <Workspace
        collapsed={collapsed}
        pane={view === 'chat' ? 'chat' : 'view'}
        start={
          <>
            <ProjectChip name="MEGA Shop" />
            <Button variant="ghost" size="icon-sm" aria-label="History">
              <History size={16} />
            </Button>
            <Button
              variant="ghost"
              size="icon-sm"
              aria-label="Chat panel"
              aria-expanded={!collapsed}
              onClick={() => setCollapsed((c) => !c)}
            >
              <PanelLeft size={16} />
            </Button>
          </>
        }
        middle={
          <>
            <Views views={[...VIEWS, CHAT]} value={view} onChange={setView} label="Editor view" />
            <Views views={DEVICES} value={device} onChange={setDevice} label="Device" labels="none" />
            <Button variant="ghost" size="icon-sm" aria-label="Reload preview">
              <RefreshCw size={15} />
            </Button>
            <PageSelect pages={[{ id: '/', label: 'Homepage' }, { id: '/about', label: 'About' }]} value="/" onChange={() => {}} />
          </>
        }
        end={
          <>
            <Button variant="secondary" size="sm">
              <Share2 size={14} />
              Share
            </Button>
            <Button variant="primary" size="sm">
              Publish
            </Button>
          </>
        }
        chat={
          <YStack flex={1} gap="$2" p="$3">
            <Thread maxWidth={0}>
              <Message role="assistant">MEGA Shop is loaded. Tell me what to change and I will build it.</Message>
            </Thread>
            <Suggestions items={SUGGESTIONS} onPick={() => {}} />
          </YStack>
        }
        dock={<Console lines={[{ id: 1, level: 'log', text: 'ready on :3000', source: 'run' }]} height={dock} onHeight={setDock} />}
      >
        <PreviewFrame src="https://hanzo.ai/" device={device === 'mobile' ? 'mobile' : 'desktop'} />
      </Workspace>
    </YStack>
  )
}

export function ViewTabs() {
  const [view, setView] = useState('preview')
  return <Views views={VIEWS} value={view} onChange={setView} label="Editor view" />
}

export function Project() {
  return <ProjectChip name="MEGA Shop" />
}

Types

export interface WorkspaceProps extends Col {
  /** The bar's left cluster: the mark, the project, history, the chat toggle. */
  start?: ReactNode
  /** The bar's middle: view tabs, device, reload, page, open. Yields first. */
  middle?: ReactNode
  /** The bar's right cluster: Share, Publish. Never shrinks. */
  end?: ReactNode
  /** The chat column — thread, suggestions, composer. */
  chat?: ReactNode
  /** The chosen view: preview, files, code, layers. */
  children?: ReactNode
  /** Under the view: the console. */
  dock?: ReactNode
  /** The chat column is hidden on a wide screen. Controlled; the host persists it. */
  collapsed?: boolean
  /** Below `md`, which pane shows. */
  pane?: 'chat' | 'view'
  /** The chat column's width on a wide screen, px. */
  width?: number
}

export interface View {
  id: string
  label: string
  icon?: ComponentType<{ size?: number }>
  /** Drawn only below `md` — the phone's Chat entry. */
  narrow?: boolean
}

export interface ViewsProps extends Omit<ComponentProps<typeof XStack>, 'children' | 'onChange'> {
  views: readonly View[]
  value: string
  onChange: (id: string) => void
  /** The group's accessible name: "Editor view", "Device". */
  label: string
  /** Which segments carry their words: only the chosen one (v2), all, or none. */
  labels?: 'active' | 'all' | 'none'
}

export interface ProjectChipProps extends Omit<ComponentProps<typeof XStack>, 'children'> {
  /** The project's name. */
  name: string
  /** The square before the name; the name's initial when absent. */
  mark?: ReactNode
  onPress?: () => void
  /** The button, for a menu or popover to anchor to. A plain prop (React 19). */
  ref?: Ref<HTMLElement>
}

Exports