Skip to content
Back to skills

138 Fn 97 316cfc69

ASecurity

Create SplitPanel component for horizontal layout (pi-tui only has vertical Container).

  • 9 stars
  • 0 votes
  • 0 copies
  • 0 views
  • Added October 11, 2026
developmenttypescript

Security analysis

A100/100

Scanned October 11, 2026

npx -y skills add tools-only/X-Skills --skill 138-fn-97_316cfc69 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 138 Fn 97 316cfc69?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for 138 Fn 97 316cfc69
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-138-fn-97-316cfc69/badge)](https://www.skillsdirectory.com/skills/tools-only-138-fn-97-316cfc69)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

SKILL.md
# 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

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.