Canvas

Usage

import {
  CanvasPanel,
  CanvasSection,
  CanvasToggle,
  ChatSplit,
} from "@tulipfarm/sprout/canvas";
import { Database } from "reicon-react/icons/Database";

<header>
  <h1>Launch week planning</h1>
  <CanvasToggle open={open} count={items.length} onToggle={() => setOpen(!open)} />
</header>
<ChatSplit
  open={open}
  onOpenChange={setOpen}
  layoutId="launch-week"
  chat={<Conversation />}
  canvas={
    <CanvasPanel
      tabs={items.map((item) => ({
        id: item.id,
        title: item.title,
        icon: Database,
        busy: item.loading,
      }))}
      activeId={activeId}
      onSelect={setActiveId}
      onCloseTab={closeItem}
      onClose={() => setOpen(false)}
    >
      {items.map((item) => (
        <div key={item.id} hidden={item.id !== activeId}>
          <CanvasSection title={item.title} meta="3 rows">
            <RowsTable rows={item.rows} />
          </CanvasSection>
        </div>
      ))}
    </CanvasPanel>
  }
/>

• ChatSplit: open, onOpenChange,chat, canvas, and an optionallayoutId that saves the split size per screen. The canvas can be null or false while nothing is open.
• CanvasPanel: tabs (id,title, optional icon and busy),activeId, onSelect, onCloseTab,onClose, and an optional activity strip under the header. With no tabs the header reads “Canvas”.
• CanvasToggle: open, count, andonToggle. It reads “View results” or “Hide results”, and shows the count when results are open.
• CanvasSection: optional title,meta, and actions. Leave all three out to just pad and stack content.
• CanvasFrame: src and title. The page runs in a sandbox with scripts and popups only, and sends no referrer.
• canvasSplitMinWidth is 720. Compare it with the width of [data-slot="chat-split"] to know whether the canvas is a sheet.

Toggle

Sits in the screen header. Each state below is from a TulipFarm screen.

Sections

Every section shape a TulipFarm result uses: with and without a title, meta, and actions, plus loading, empty, unavailable, and error content.

Browser frame

Shows a web page inside the canvas with a link to open it in a new tab.

In TulipFarm

Approval review, workflow review, result cards, and a two-tab example. Each keeps its own saved split size.

Keyboard and accessibility

• Tabs use one tab stop. ← and → move between tabs and wrap. Home and End jump to the first and last tab. Delete closes the focused tab and moves focus to the next one.
• Esc anywhere in the canvas closes it. On a sheet, focus returns to whatever opened it.
• The resize handle is a focusable separator labelled “Resize canvas”. Arrow keys resize it.
• A busy tab shows a spinner and reads “loading”. The spinner stops when reduced motion is on.
• On touch screens the close buttons stay visible and grow to 32px.