Canvas Draw

import { CanvasDraw } from 'fluxo-ui';
import type { DrawItem } from 'fluxo-ui';

const [items, setItems] = useState<DrawItem[]>([]);

<CanvasDraw
  background={{ type: 'image', src: '/screenshot.png' }}
  items={items}
  onItemsChange={setItems}
  style={{ height: 400 }}
/>

<CanvasDraw
  background={{ type: 'color', color: '#f8f9fa' }}
  items={items}
  onItemsChange={setItems}
  defaultTool="freehand"
  style={{ height: 350 }}
/>

// Toolbar on the bottom
<CanvasDraw
  background={{ type: 'color', color: '#eef2ff' }}
  toolbarPlacement="bottom"
/>

// Vertical toolbar on the left
<CanvasDraw
  background={{ type: 'color', color: '#fef3c7' }}
  toolbarPlacement="left"
/>

// Available: 'top' | 'bottom' | 'left' | 'right' | 'none'

<CanvasDraw
  background={{ type: 'color', color: '#f0fdf4' }}
  features={{
    timing: false,
    transitions: false,
    groups: false,
    export: false,
    fontControls: false,
    roundedCorners: false,
  }}
/>

<CanvasDraw
  background={{ type: 'color', color: '#faf5ff' }}
  features={{
    tools: {
      select: true,
      arrow: true,
      rect: true,
      freehand: false,
      line: false,
      circle: false,
      text: false,
      balloon: false,
      step: false,
    },
    timing: false,
    transitions: false,
    groups: false,
  }}
/>

const items: DrawItem[] = [
  {
    id: 'item-1',
    object: { type: 'rect', /* ... */ },
    showAtMs: 0,
    hideAtMs: 3000,
    transition: 'fade',
    groupId: null,
    xPct: 0.1, yPct: 0.15, wPct: 0.3, hPct: 0.3,
  },
  {
    id: 'item-2',
    object: { type: 'arrow', /* ... */ },
    showAtMs: 2000,
    hideAtMs: 5000,
    transition: 'scale',
    groupId: null,
    xPct: 0.5, yPct: 0.2, wPct: 0.3, hPct: 0.3,
  },
];

<CanvasDraw
  background={{ type: 'color', color: '#1a1a2e' }}
  items={items}
  currentMs={currentMs}
  mediaDurationMs={8000}
  features={{ timing: true, transitions: true, groups: true }}
/>

import { MediaTimeline } from 'fluxo-ui';
import type { TimelineItem, TimelineGroup } from 'fluxo-ui';

const [items, setItems] = useState<TimelineItem[]>([
  { id: '1', label: 'Intro', showAtMs: 0, hideAtMs: 3000,
    groupId: null, transition: 'fade' },
]);
const [groups, setGroups] = useState<TimelineGroup[]>([]);
const [selected, setSelected] = useState<string | null>(null);
const [currentMs, setCurrentMs] = useState(0);

<MediaTimeline
  items={items}
  groups={groups}
  durationMs={10000}
  currentMs={currentMs}
  selectedItemId={selected}
  onSelectItem={setSelected}
  onUpdateItem={(id, patch) =>
    setItems(prev => prev.map(it => it.id === id ? { ...it, ...patch } : it))
  }
  onUpdateGroup={(id, patch) =>
    setGroups(prev => prev.map(g => g.id === id ? { ...g, ...patch } : g))
  }
  onAddGroup={() => setGroups(prev => [...prev, { id: `g-${Date.now()}`, label: 'New Group', showAtMs: 0, hideAtMs: null, transition: 'none' }])}
  onDeleteGroup={(id) => setGroups(prev => prev.filter(g => g.id !== id))}
  onSeek={setCurrentMs}
/>

const [items, setItems] = useState<DrawItem[]>([]);

<CanvasDraw
  background={{ type: 'color', color: '#fff7ed' }}
  items={items}
  onItemsChange={setItems}
/>

// Uncontrolled — just omit items prop:
<CanvasDraw background={{ type: 'color', color: '#fff' }} />

<CanvasDraw
  background={{ type: 'image', src: '/screenshot.png' }}
  items={savedItems}
  isEditing={false}
/>

const handleExport = (dataUrl: string, format: ImageExportFormat) => {
  // dataUrl contains the image data
  // SVG export works without extra dependencies
  // PNG/JPG/WebP requires: npm install html2canvas
  console.log(`Exported ${format}:`, dataUrl.length, 'chars');
};

<CanvasDraw
  background={{ type: 'color', color: '#f0f9ff' }}
  onExport={handleExport}
  features={{ export: true }}
/>