astrimid/sch-section-wrapper

README.md

# `SchSection`

> Group `tscircuit` components into schematic sections without repeating `schSectionName` on every element.

`SchSection` (`@tsci/astrimid.sch-section-wrapper`) is a stopgap wrapper that injects `schSectionName` into child components automatically. Native support is in progress: [tscircuit/props#749](https://github.com/tscircuit/props/pull/749) adds `children` support to `SchematicSectionProps`, and [tscircuit/core#2791](https://github.com/tscircuit/core/pull/2791) makes the layout engine section-aware. Once merged, this package won't be needed.

## Why

Grouping components into a schematic section normally means one of two things:

- **Tagging every component** with `schSectionName="power"` individually — tedious on larger boards, easy to typo or forget.
- **Using `<subcircuit>`**, which accepts `schSectionName` but also scopes net names and isolates component boundaries — more structure than you asked for if all you wanted was visual grouping.

`SchSection` gives you the grouping without either cost.

## Usage

`SchSection` has two modes, depending on whether it has children.

**Without children**, it declares a section header:

```tsx
<SchSection name="power" />
// → <schematicsection name="power" displayName="POWER" />

<SchSection name="power" displayName="Power Supply" />
// → <schematicsection name="power" displayName="Power Supply" />
```

**With children**, it clones them and injects `schSectionName`:

```tsx
<SchSection name="power">
  <capacitor name="C1" capacitance="100uF" footprint="0805" schX={-4} schY={3} />
</SchSection>
// → <capacitor name="C1" capacitance="100uF" footprint="0805" schX={-4} schY={3} schSectionName="power" />
```

A full board typically declares headers up front, then wraps each group:

```tsx
import React from "react"
import { SchSection } from "@tsci/astrimid.sch-section-wrapper"

export default () => (
  <board width="10mm" height="10mm">
    <SchSection name="power" />
    <SchSection name="filter" />

    <SchSection name="power">
      <capacitor name="C1" capacitance="100uF" footprint="0805" schX={-4} schY={3} />
      <capacitor name="C2" capacitance="100nF" footprint="0402" schX={-2} schY={3} />
    </SchSection>

    <SchSection name="filter">
      <resistor name="R1" resistance="10k" footprint="0402" schX={2} schY={3} />
      <capacitor name="C3" capacitance="10nF" footprint="0402" schX={4} schY={3} />
    </SchSection>
  </board>
)
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | Yes | — | Unique identifier for the section. |
| `displayName` | `string` | No | `name.toUpperCase()` | Label shown in the schematic view. |
| `children` | `ReactElement \| ReactElement[]` | No | `undefined` | Components to assign to this section. |