tabs

[airtonix]

• render tabs and panes
• horizontal vs vertical should be controlled by Flex/Grid components (not implemented within these components)

architecture:

 TabController
   Flex({ mode: 'fill })
     sized(Container, 64)
       Tab
       Tab
     Container
       Pane
       Pane
       Pane

Example usage

// setup state
const controller = new TabController();

const tab1 = new Tab("tab1", new Text(theme, "Label"), { 
  active: true,
  onSelect() { controller.setActive("tab1"); } // explicit control
}); 

const tab2 = new Tab("tab2", new Text(theme, "Label")); // implicit control 

controller.addTabs(tab1, tab2)

const pane1 = new Pane("tab1", new Text(theme, "Pane 1 Content")) // panes don't render if their related tab is inactive
const pane2 = new Pane("tab2", new Text(theme, "Pane 2 Content"))

controller.addPanes(pane1, pane2)

// setup rendering

const frame = new Flex({ mode: "fill" });
const sidebar = new Container()
sidebar.addChild(tab1)
sidebar.addChild(tab2)

const page = new Container()
page.addChild(pane1)
page.addChild(pane2)

frame.addChild(sized(sidebar))
frame.addChild(page)

[airtonix]

Planning Complete

This issue has been analyzed and planning documents have been created:

📋 Specification

A comprehensive specification document has been created defining:

• Component architecture (TabController, Tab, Pane)
• API design and usage patterns
• Behavioral requirements
• Testing requirements
• Edge cases

Document: .memory/research-e193044a-tabs-component-specification.md

📐 Implementation Plan

A detailed implementation plan with 12 tasks has been created:

• Estimated time: 18-22 hours (3-5 days)
• Includes unit, integration, and snapshot tests
• Complete documentation requirements
• Risk mitigation strategies

Document: .memory/phase-f89b39da-tabs-component-implementation.md

🎯 Epic Association

This issue is now part of the pi-ds TUI Design System epic (Phase 3: Interactive Components).

Epic Document: .memory/epic-62d4d25c-pi-ds-tui-design-system.md

✅ Next Steps

1. Human review of specification and plan
2. Begin implementation following the 12-task plan
3. Complete testing infrastructure setup (Phase 2) if not already done

The planning phase is complete and ready for execution once approved.