Back to skills
SKILL.md
138 Fn 97 316cfc69
ASecurityCreate SplitPanel component for horizontal layout (pi-tui only has vertical Container).
- 9 stars
- 0 votes
- 0 copies
- 0 views
- Added October 11, 2026
Security analysis
100/100npx -y skills add tools-only/X-Skills --skill 138-fn-97_316cfc69 --agent claude-codeAre you the author of 138 Fn 97 316cfc69?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tools-only-138-fn-97-316cfc69)# fn-9.7 SplitPanel component
## Description
Create SplitPanel component for horizontal layout (pi-tui only has vertical Container).
### File
`src/components/split-panel.ts`
### Interface
```typescript
interface SplitPanelProps {
left: Component;
right: Component;
ratio?: number; // default 0.3 (30% left)
separator?: string; // default '│'
}
class SplitPanel implements Component {
render(width: number): string[]
handleInput(data: string): void
invalidate(): void
}
```
### Implementation
1. Calculate left/right widths from ratio
2. Render both children to their widths
3. Pad shorter panel with empty lines to match height
4. Join lines side-by-side with separator
5. Use `visibleWidth()` for ANSI-aware width calculation
### Reference
```typescript
render(width: number): string[] {
const leftWidth = Math.floor(width * this.ratio);
const rightWidth = width - leftWidth - 1;
const leftLines = this.left.render(leftWidth);
const rightLines = this.right.render(rightWidth);
const maxHeight = Math.max(leftLines.length, rightLines.length);
return Array.from({ length: maxHeight }, (_, i) => {
const l = padToWidth(leftLines[i] || '', leftWidth);
const r = rightLines[i] || '';
return l + '│' + r;
});
}
```
## Acceptance
- [ ] Renders two components side-by-side
- [ ] Ratio controls width split correctly
- [ ] Separator visible between panels
- [ ] Shorter panel padded to match height
- [ ] ANSI codes don't break width calculation
- [ ] Input forwarded to appropriate child
## Done summary
- Added SplitPanel component for horizontal two-panel layout
- Implements configurable ratio (default 0.3) and separator (default │)
- Handles ANSI codes via visibleWidth/padToWidth from render.ts
- Falls back to left-only when width too small
Tests verify all acceptance criteria:
- Side-by-side rendering, ratio control, separator visibility
- Height padding, ANSI handling, input forwarding
## Evidence
- Commits: 8073ab1d1378824ab736cc4ae74c5645280f24d0
- Tests: bun test
- PRs:Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.