pi-openui 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.1.1 (2026-10-30)
+
+- The README now renders on pi.dev and npm: screenshots are markdown images (pi.dev drops raw HTML tables and images) and
+  links to the documentation are absolute (pi.dev rewrote the relative ones to a CDN copy of the package, which has no `docs/`).
+  Nothing changes in the extension.
+
 ## 0.1.0 (2026-10-30)
 
 - **Notes.** Pin a comment to a table cell, node, slice, point or paragraph; the notes go into pi's message box as one numbered

package/README.md

@@ -6,22 +6,9 @@ coding agent. The agent writes a few lines of OpenUI Lang. pi draws a widget you
 It uses unicode characters, and real pictures where the terminal can show them. There is no browser, no HTML, no runtime
 dependency and no network access.
 
-<table>
-<tr>
-<td valign="top"><img src="docs/screenshots/dashboard.png" width="440" alt="A dashboard: three metric tiles, a bar chart and a button"></td>
-<td valign="top"><img src="docs/screenshots/dag-tooltip.png" width="360" alt="A CI pipeline graph with a focused node, a hint bubble and its tooltip panel"></td>
-</tr>
-<tr>
-<td valign="top"><img src="docs/screenshots/infra.png" width="440" alt="An infrastructure map with three zones"></td>
-<td valign="top"><img src="docs/screenshots/image-tooltip.png" width="360" alt="A picture in a frame with a tooltip bubble"></td>
-</tr>
-<tr>
-<td valign="top"><img src="docs/screenshots/notes-tray.png" width="440" alt="Two notes pinned on a table, with a tray listing them"></td>
-<td valign="top"><img src="docs/screenshots/markdown-image.png" width="360" alt="A README-style view: one markdown with a picture between its paragraphs"></td>
-</tr>
-</table>
-
-<sub>Screenshots are drawn by `npm run screenshots` from the widget's real output, with pi's dark theme and JetBrains Mono.</sub>
+![Dashboards, diagrams with tooltips, an infrastructure map, a picture in a frame, and notes pinned on a table and on a graph](https://raw.githubusercontent.com/newtonapple/pi-openui/main/docs/screenshots/hero.png)
+
+*Screenshots are drawn by `npm run screenshots` from the widget's real output, with pi's dark theme and JetBrains Mono.*
 
 ## What you get
 
@@ -29,18 +16,18 @@ dependency and no network access.
   numbers, so it fixes them and tries again. After a successful draw it says one short sentence.
 - **23 components.** Layout and text, metric tiles, tables, tabs, buttons and choices, FAQ, markdown, code with
   highlighting and a copy button, images, bar, line, area, pie and radar charts, a world map, and four diagram types
-  (DAG, ER, infrastructure map, sequence). See the [component gallery](docs/components/README.md).
+  (DAG, ER, infrastructure map, sequence). See the [component gallery](https://github.com/newtonapple/pi-openui/blob/main/docs/components/README.md).
 - **Interaction.** Click, or use Tab, the arrow keys, Enter and Esc. A button or a choice sends text to the agent as your next
-  message. See [docs/interaction.md](docs/interaction.md).
+  message. See [docs/interaction.md](https://github.com/newtonapple/pi-openui/blob/main/docs/interaction.md).
 - **Notes.** Pin a comment to a table cell, a graph node or a pie slice, then send all of them to the agent as one numbered
   message. You read and edit the message before it goes. See [Notes](#notes).
 - **Tooltips.** An element with a tooltip shows a small `◆`. Hover for a hint bubble, click or press Enter for a panel with
-  detail, code and a link. See [Tooltip](docs/components/Tooltip.md).
+  detail, code and a link. See [Tooltip](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Tooltip.md).
 - **Pictures.** An `Image` draws the real picture in terminals that speak the Kitty graphics protocol, inside a frame that
   can carry a tooltip. A line of Markdown that is only a picture, `![alt](path "caption")`, is drawn the same way, so a
-  README-style view is one `Markdown`. See [Image](docs/components/Image.md) and [Markdown](docs/components/Markdown.md).
+  README-style view is one `Markdown`. See [Image](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Image.md) and [Markdown](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Markdown.md).
 - **Robust diagrams.** Every graph, schema and map is routed on a character grid with one wire per edge. The tests decode
-  the finished picture back into its edges and compare them with the input. See [docs/diagrams.md](docs/diagrams.md).
+  the finished picture back into its edges and compare them with the input. See [docs/diagrams.md](https://github.com/newtonapple/pi-openui/blob/main/docs/diagrams.md).
 
 ## Install
 
@@ -63,7 +50,7 @@ and run `/openui-gallery`. It needs pi 1.4 or newer.
 | Remove | `pi remove npm:pi-openui` |
 
 It is in pi's [package catalog](https://pi.dev/packages), which lists npm packages that carry the `pi-package` keyword. After an
-update pi shows this package's [changelog](CHANGELOG.md). Maintainers: see [docs/releasing.md](docs/releasing.md).
+update pi shows this package's [changelog](CHANGELOG.md). Maintainers: see [docs/releasing.md](https://github.com/newtonapple/pi-openui/blob/main/docs/releasing.md).
 
 ## Use it
 
@@ -85,56 +72,36 @@ The mouse needs pi's default fullscreen mode. Everything also works from the key
 Pin a comment to one part of a widget, then send all your comments to the agent as a single message. Use it to say "this row
 is wrong" or "explain this node" without describing where it is.
 
-<table>
-<tr>
-<td valign="top"><img src="docs/screenshots/notes-dag.png" width="440" alt="A note pinned on a graph node, with the tray under the graph"></td>
-<td valign="top">
+![A note pinned on a graph node, with the tray under the graph](https://raw.githubusercontent.com/newtonapple/pi-openui/main/docs/screenshots/notes-dag.png)
 
 1. Click `[ notes ]` under a widget, or run `/openui-notes`.
 2. Click a cell, node, slice or paragraph, or Tab to it and press Enter. pi's own editor opens. Type, press Enter.
 3. Click `[ Add 2 notes to your message ]`, or Tab to it and press Enter. The notes land in pi's message box as a numbered list.
 4. Read it, edit it, press Enter. Nothing is sent before that.
 
-</td>
-</tr>
-</table>
-
 Each note names its target the way the agent wrote it, for example `tbl` (Table) > row 3, column `State`, so the agent can find
 the line in its own source and answer by number. Words that come from the widget are cleaned before they reach your message,
 so a widget cannot slip an `@file` reference or a code span into something you are about to send.
 
 A widget holds 20 notes. They live in memory and are gone when the session ends. Keys, what each component lets you pick, and
-the details are in [docs/interaction.md](docs/interaction.md#notes).
+the details are in [docs/interaction.md](https://github.com/newtonapple/pi-openui/blob/main/docs/interaction.md#notes).
 
 ## Components
 
-<table>
-<tr>
-<td valign="top" width="25%"><a href="docs/components/Table.md"><img src="docs/screenshots/table.png" width="200" alt="Table"></a><br><sub>Table</sub></td>
-<td valign="top" width="25%"><a href="docs/components/LineChart.md"><img src="docs/screenshots/line.png" width="200" alt="LineChart"></a><br><sub>LineChart</sub></td>
-<td valign="top" width="25%"><a href="docs/components/PieChart.md"><img src="docs/screenshots/pie.png" width="200" alt="PieChart"></a><br><sub>PieChart</sub></td>
-<td valign="top" width="25%"><a href="docs/components/GeoMap.md"><img src="docs/screenshots/geo.png" width="200" alt="GeoMap"></a><br><sub>GeoMap</sub></td>
-</tr>
-<tr>
-<td valign="top"><a href="docs/components/Erd.md"><img src="docs/screenshots/erd.png" width="200" alt="Erd"></a><br><sub>Erd</sub></td>
-<td valign="top"><a href="docs/components/SequenceDiagram.md"><img src="docs/screenshots/sequence.png" width="200" alt="SequenceDiagram"></a><br><sub>SequenceDiagram</sub></td>
-<td valign="top"><a href="docs/components/CodeBlock.md"><img src="docs/screenshots/code.png" width="200" alt="CodeBlock"></a><br><sub>CodeBlock</sub></td>
-<td valign="top"><a href="docs/components/RadarChart.md"><img src="docs/screenshots/radar.png" width="200" alt="RadarChart"></a><br><sub>RadarChart</sub></td>
-</tr>
-</table>
-
-All 23, with signatures, every argument, a checked example and tips: **[docs/components/](docs/components/README.md)**.
+![Eight of the components: Table, LineChart, PieChart, GeoMap, Erd, SequenceDiagram, CodeBlock, RadarChart](https://raw.githubusercontent.com/newtonapple/pi-openui/main/docs/screenshots/components.png)
+
+All 23, with signatures, every argument, a checked example and tips: **[docs/components/](https://github.com/newtonapple/pi-openui/blob/main/docs/components/README.md)**.
 
 | Group | Components |
 |---|---|
-| Layout and text | [Stack](docs/components/Stack.md), [Text](docs/components/Text.md), [Card](docs/components/Card.md), [Callout](docs/components/Callout.md) |
-| Data | [Metric](docs/components/Metric.md), [Table](docs/components/Table.md) |
-| Interactive | [Tabs](docs/components/Tabs.md), [Button](docs/components/Button.md), [Choice](docs/components/Choice.md), [Faq](docs/components/Faq.md) |
-| Rich content | [Markdown](docs/components/Markdown.md), [CodeBlock](docs/components/CodeBlock.md), [Image](docs/components/Image.md) |
-| Charts | [BarChart](docs/components/BarChart.md), [LineChart](docs/components/LineChart.md), [AreaChart](docs/components/AreaChart.md), [PieChart](docs/components/PieChart.md), [RadarChart](docs/components/RadarChart.md) |
-| Diagrams and maps | [Dag](docs/components/Dag.md), [Erd](docs/components/Erd.md), [InfraMap](docs/components/InfraMap.md), [SequenceDiagram](docs/components/SequenceDiagram.md), [GeoMap](docs/components/GeoMap.md) |
-
-[Tooltip](docs/components/Tooltip.md) attaches to Dag, Erd, InfraMap, SequenceDiagram, Table, Metric, BarChart,
+| Layout and text | [Stack](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Stack.md), [Text](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Text.md), [Card](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Card.md), [Callout](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Callout.md) |
+| Data | [Metric](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Metric.md), [Table](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Table.md) |
+| Interactive | [Tabs](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Tabs.md), [Button](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Button.md), [Choice](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Choice.md), [Faq](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Faq.md) |
+| Rich content | [Markdown](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Markdown.md), [CodeBlock](https://github.com/newtonapple/pi-openui/blob/main/docs/components/CodeBlock.md), [Image](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Image.md) |
+| Charts | [BarChart](https://github.com/newtonapple/pi-openui/blob/main/docs/components/BarChart.md), [LineChart](https://github.com/newtonapple/pi-openui/blob/main/docs/components/LineChart.md), [AreaChart](https://github.com/newtonapple/pi-openui/blob/main/docs/components/AreaChart.md), [PieChart](https://github.com/newtonapple/pi-openui/blob/main/docs/components/PieChart.md), [RadarChart](https://github.com/newtonapple/pi-openui/blob/main/docs/components/RadarChart.md) |
+| Diagrams and maps | [Dag](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Dag.md), [Erd](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Erd.md), [InfraMap](https://github.com/newtonapple/pi-openui/blob/main/docs/components/InfraMap.md), [SequenceDiagram](https://github.com/newtonapple/pi-openui/blob/main/docs/components/SequenceDiagram.md), [GeoMap](https://github.com/newtonapple/pi-openui/blob/main/docs/components/GeoMap.md) |
+
+[Tooltip](https://github.com/newtonapple/pi-openui/blob/main/docs/components/Tooltip.md) attaches to Dag, Erd, InfraMap, SequenceDiagram, Table, Metric, BarChart,
 LineChart, AreaChart, PieChart, RadarChart, GeoMap and Image.
 
 ## How it works
@@ -151,7 +118,7 @@ OpenUI Lang --parse--> typed tree --render--> blocks (rows of cells + click targ
 - `src/diagram/` is the layout and routing engine for Dag, Erd and InfraMap.
 - `src/pi/` is the pi extension: the tool, the commands, the themed component, mouse and keyboard handling, pictures.
 
-More in [docs/design.md](docs/design.md).
+More in [docs/design.md](https://github.com/newtonapple/pi-openui/blob/main/docs/design.md).
 
 ## Requirements
 
@@ -175,13 +142,13 @@ After you change the code, run `/reload` in pi. The rest:
 ```sh
 npm test                 # a few seconds, no network, no model calls
 npm run docs             # regenerate docs/components/ from the signature table
-npm run screenshots      # regenerate docs/screenshots/ (needs Python with Pillow, and the font)
+npm run screenshots      # regenerate docs/screenshots/, and the two README composites (needs Python with Pillow, and the font)
 npm run gallery          # print every component to the terminal (-- --plain for no colour)
 make help                # the release process (check, version, publish, tag, push)
 ```
 
-Tests are described in [docs/testing.md](docs/testing.md). Releases are described in [docs/releasing.md](docs/releasing.md).
-Contributors and agents working in this repository should read [AGENTS.md](AGENTS.md).
+Tests are described in [docs/testing.md](https://github.com/newtonapple/pi-openui/blob/main/docs/testing.md). Releases are described in [docs/releasing.md](https://github.com/newtonapple/pi-openui/blob/main/docs/releasing.md).
+Contributors and agents working in this repository should read [AGENTS.md](https://github.com/newtonapple/pi-openui/blob/main/AGENTS.md).
 
 ## Limits
 
@@ -194,7 +161,7 @@ Contributors and agents working in this repository should read [AGENTS.md](AGENT
   saved at all.
 - A widget has size limits (100 KB of source, 100 table rows, 60 graph nodes, 30 map nodes, and so on). Over a limit the
   agent gets an error with the number and fixes it. They keep pi fast: it draws every widget on every frame. See the
-  [list](docs/components/README.md#size-limits).
+  [list](https://github.com/newtonapple/pi-openui/blob/main/docs/components/README.md#size-limits).
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-openui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Pi extension: interactive dashboards, charts, diagrams and maps in the terminal. The agent draws with OpenUI Lang; you click, hover and pin notes.",
   "license": "MIT",
@@ -49,7 +49,7 @@
   "scripts": {
     "test": "node --import ./test/register-pi.mjs --test --test-reporter=spec test/*.test.ts",
     "gallery": "node scripts/langgallery.ts",
-    "screenshots": "node --import ./test/register-pi.mjs scripts/shots.ts && python3 scripts/render_shots.py",
+    "screenshots": "node --import ./test/register-pi.mjs scripts/shots.ts && python3 scripts/render_shots.py && python3 scripts/hero.py",
     "docs": "node scripts/gen_docs.ts",
     "prepublishOnly": "npm test"
   }