Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .codebuddy/skills/pagx/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ description: >-
Generates well-structured PAGX files from visual descriptions and optimizes existing
ones for size and rendering performance. Use when user asks to create, write, or
design PAGX content, optimize or simplify a .pagx file, review PAGX structure, run
pagx CLI commands (render, validate, format, optimize, bounds, font info/embed,
align, distribute), or look up PAGX element attributes and syntax.
pagx CLI commands (render, validate, format, optimize, bounds, font info/embed), or
look up PAGX element attributes and syntax.
---

# PAGX Skill
Expand Down Expand Up @@ -44,4 +44,4 @@ generation or optimization task.
| `spec-essentials.md` | Node types, Layer rendering pipeline, painter scope, text system, masking, resources |
| `design-patterns.md` | Structure decisions (Layer vs Group), text layout patterns, practical pitfall patterns |
| `attributes.md` | Attribute defaults, enumerations, required attributes |
| `cli.md` | CLI commands — `render`, `validate`, `optimize`, `format`, `bounds`, `font info`, `font embed`, `align`, `distribute` |
| `cli.md` | CLI commands — `render`, `validate`, `optimize`, `format`, `bounds`, `font info`, `font embed` |
61 changes: 0 additions & 61 deletions .codebuddy/skills/pagx/references/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -217,64 +217,3 @@ pagx font embed --file a.ttf --fallback "PingFang SC" --fallback b.otf input.pag
`"PingFang SC"` or `"Arial,Bold"`). All fonts added via `--fallback` are also registered
automatically. Fallback fonts are tried in order when a character is not found in the
primary font. System fallback fonts are always appended after user-specified fallbacks.

---

## pagx align

Align selected Layer nodes along a specified edge or center line. Supports cross-hierarchy
alignment — selected Layers can be at different nesting levels. Bounds are computed in global
canvas coordinates, and offsets are converted back to each Layer's local coordinate space.

```bash
pagx align --id btn1 --id btn2 --anchor left input.pagx
pagx align --xpath "//Layer[@name='icon']" --anchor centerY input.pagx
pagx align --id header --id footer --anchor centerX -o aligned.pagx input.pagx
```

| Option | Description |
|--------|-------------|
| `--id <id>` | Select a Layer by its `id` attribute (can be repeated) |
| `--xpath <expr>` | Select Layers by XPath expression |
| `--anchor <value>` | Alignment anchor (required) |
| `-o, --output <path>` | Output file path (default: overwrite input) |

`--id` can be used multiple times and combined with `--xpath`. At least 2 Layers must be
selected. The file is modified in place unless `-o` is specified.

**Anchor values**:

| Anchor | Behavior |
|--------|----------|
| `left` | Align left edges to the leftmost Layer's left edge |
| `right` | Align right edges to the rightmost Layer's right edge |
| `top` | Align top edges to the topmost Layer's top edge |
| `bottom` | Align bottom edges to the bottommost Layer's bottom edge |
| `centerX` | Align horizontal centers to the selection's horizontal center |
| `centerY` | Align vertical centers to the selection's vertical center |

---

## pagx distribute

Distribute selected Layer nodes with equal spacing along an axis. The first and last Layers
(by current position) remain in place while middle Layers are repositioned to create uniform
gaps. Supports cross-hierarchy distribution.

```bash
pagx distribute --id a --id b --id c --axis x input.pagx
pagx distribute --xpath "//Layer[@name='item']" --axis y input.pagx
pagx distribute --id col1 --id col2 --id col3 --id col4 --axis x -o out.pagx input.pagx
```

| Option | Description |
|--------|-------------|
| `--id <id>` | Select a Layer by its `id` attribute (can be repeated) |
| `--xpath <expr>` | Select Layers by XPath expression |
| `--axis <value>` | Distribution axis: `x` or `y` (required) |
| `-o, --output <path>` | Output file path (default: overwrite input) |

`--id` can be used multiple times and combined with `--xpath`. At least 3 Layers must be
selected (2 Layers have no gap to equalize). Layers are sorted by their current position
along the chosen axis before distribution. The file is modified in place unless `-o` is
specified.
19 changes: 7 additions & 12 deletions .codebuddy/skills/pagx/references/generate-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Read these as needed:
|-----------|---------|
| `examples.md` | Structural patterns for Icons, UI, Logos, Charts, Decorative backgrounds |
| `attributes.md` | Attribute defaults, enumerations, required attributes |
| `cli.md` | CLI tool usage — `render`, `bounds`, `font info`, `align`, `distribute` commands |
| `cli.md` | CLI tool usage — `render`, `bounds`, `font info` commands |

---

Expand Down Expand Up @@ -141,10 +141,7 @@ be unified to the exact same value. Common scenarios include but are not limited
- Container padding should be symmetric (left = right, top = bottom)
- Similar containers (cards, buttons, badges) should use the same internal padding

Tool selection:
- **2+ Layers sharing an edge or center** → `pagx align` (see `cli.md`)
- **3+ Layers in a row or column** → `pagx distribute` (see `cli.md`)
- **Padding and gaps** → measure with `pagx bounds`, then adjust coordinates to equalize
Use `pagx bounds` to measure, then adjust coordinates to equalize.

### Step 4: Localize Coordinates

Expand All @@ -154,8 +151,8 @@ Layer `x`/`y` carries the block offset; internal coordinates start from `0,0`. S
### Step 5: Verify and Refine

After each render, follow the **Verification and Correction Loop** at the end of this
document — run `pagx bounds` first to detect misalignment by numbers, fix with CLI tools
or coordinate adjustment, then visually confirm. Do not skip bounds measurement even if
document — run `pagx bounds` first to detect misalignment by numbers, fix with
coordinate adjustment, then visually confirm. Do not skip bounds measurement even if
the screenshot looks correct.

After verification passes, continue to `optimize-guide.md` for optimization review.
Expand All @@ -179,9 +176,8 @@ for targeted measurement when needed (see `cli.md`).

### 2. Check Alignment, Spacing, and Padding by Numbers

Scan the bounds data for any misalignment, uneven spacing, or asymmetric padding. Even if
`pagx align` / `pagx distribute` were applied during generation, fixes in one area can
introduce regressions elsewhere — always re-check everything.
Scan the bounds data for any misalignment, uneven spacing, or asymmetric padding. Fixes
in one area can introduce regressions elsewhere — always re-check everything.

**Alignment** — elements that should share an edge or center:
```
Expand Down Expand Up @@ -216,8 +212,7 @@ Compute from bounds, not from Layer `x`/`y` — asymmetric content shifts the vi

### 3. Fix Issues

- **Alignment or distribution off** → re-run `pagx align` / `pagx distribute`
- **Uneven padding or gaps** → adjust Layer `x`/`y` to equalize values
- **Alignment or spacing off** → adjust Layer `x`/`y` or element `position`/`center` to equalize values

### 4. Re-render and Visually Confirm

Expand Down
40 changes: 0 additions & 40 deletions cli/npm/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ npm install -g @libpag/pagx
| `pagx bounds` | Query the precise rendered bounds of layers |
| `pagx font info` | Query font identity and metrics from a file or system font |
| `pagx font embed` | Embed fonts into a PAGX file with glyph extraction |
| `pagx align` | Align selected layers along an edge or center line |
| `pagx distribute` | Distribute selected layers with equal spacing |

## Usage Examples

Expand Down Expand Up @@ -74,15 +72,6 @@ pagx font info --file CustomFont.ttf --json

# Embed fonts with a custom fallback
pagx font embed --file BrandFont.ttf --fallback "Arial" input.pagx

# Align three layers to the left edge
pagx align --id a --id b --id c --anchor left input.pagx

# Align layers matched by XPath to their vertical center
pagx align --xpath "//Layer[@name='icon']" --anchor centerY input.pagx

# Distribute layers with equal horizontal spacing
pagx distribute --id a --id b --id c --axis x input.pagx
```

## Command Reference
Expand Down Expand Up @@ -179,35 +168,6 @@ Embed fonts into a PAGX file by performing text layout and glyph extraction.
| `--file <path>` | Register a font file (repeatable) |
| `--fallback <path\|name>` | Add a fallback font file or system font name (repeatable) |

### `pagx align [options] <file.pagx>`

Align selected Layer nodes along a specified edge or center line. Computes bounds in global
coordinates and converts offsets back to each Layer's local coordinate space, so cross-hierarchy
alignment works correctly.

| Option | Description |
|--------|-------------|
| `--id <id>` | Select a Layer by its id attribute (repeatable) |
| `--xpath <expr>` | Select Layers by XPath expression |
| `--anchor <value>` | Alignment anchor: `left`, `right`, `top`, `bottom`, `centerX`, `centerY` |
| `-o, --output <path>` | Output file path (default: overwrite input) |

At least 2 Layers must be selected. `--id` can be used multiple times and combined with `--xpath`.

### `pagx distribute [options] <file.pagx>`

Distribute selected Layer nodes with equal spacing along an axis. The first and last Layers (by
position) remain in place while middle Layers are repositioned to create uniform gaps.

| Option | Description |
|--------|-------------|
| `--id <id>` | Select a Layer by its id attribute (repeatable) |
| `--xpath <expr>` | Select Layers by XPath expression |
| `--axis <value>` | Distribution axis: `x` or `y` |
| `-o, --output <path>` | Output file path (default: overwrite input) |

At least 3 Layers must be selected. `--id` can be used multiple times and combined with `--xpath`.

## Supported Platforms

- macOS (Apple Silicon and Intel)
Expand Down
30 changes: 0 additions & 30 deletions resources/cli/align_distribute.pagx

This file was deleted.

Loading