reflex-silverpoint-react 0.2.0__tar.gz → 0.6.0__tar.gz

{reflex_silverpoint_react-0.2.0 → reflex_silverpoint_react-0.6.0}/PKG-INFO

@@ -1,14 +1,14 @@
 Metadata-Version: 2.4
 Name: reflex-silverpoint-react
-Version: 0.2.0
-Summary: The 33 silverpoint charts and the linked Dashboard (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react
+Version: 0.6.0
+Summary: The 60 silverpoint charts, the linked Dashboard and the 17 UI components (Renaissance silverpoint drawing style) for Reflex, wrapping @silverpoint/react
 Author-email: Ernesto Crespo <ecrespo@gmail.com>
 License: MIT
 Project-URL: Homepage, https://github.com/ecrespo/reflex-silverpoint-react
 Project-URL: Source, https://github.com/ecrespo/reflex-silverpoint-react
 Project-URL: Issues, https://github.com/ecrespo/reflex-silverpoint-react/issues
 Project-URL: Upstream, https://github.com/ecrespo/silverpoint
-Keywords: reflex,reflex-custom-components,charts,silverpoint,data-visualization,svg
+Keywords: reflex,reflex-custom-components,charts,silverpoint,data-visualization,svg,ui-components
 Classifier: Development Status :: 4 - Beta
 Classifier: License :: OSI Approved :: MIT License
 Classifier: Programming Language :: Python :: 3
@@ -33,10 +33,36 @@ prepared ground, tone built from hatching, and white heightening on the live val
 The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
 has a `precision` mode that turns the inking off.
 
-It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.2.0 and exposes
-**all 33 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the
-`SilverpointProvider`, both grounds (`silverpoint` and `cyanotype`), the interaction events, custom
-readouts and the imperative handle (SVG export and geometry) as Python.
+It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.6.0 and exposes
+**all 60 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the **17 UI
+components** (buttons, inputs, tabs, cards, alerts…), the `SilverpointProvider`, both grounds
+(`silverpoint` and `cyanotype`), the interaction events, custom readouts and the imperative handle
+(SVG export and geometry) as Python.
+
+### New in 0.6
+
+- **27 new charts**, the second catalog of silverpoint 0.6:
+  - distributions & comparisons: `histogram_chart`, `ecdf_chart`, `box_plot_chart`, `violin_chart`,
+    `ridgeline_chart`, `beeswarm_chart`, `lollipop_chart`, `dumbbell_chart`, `slope_chart`,
+    `bump_chart`, `error_bar_chart`, `interval_chart`, `diverging_bar_chart`, `connected_scatter_chart`;
+  - hierarchies & dimensions: `waffle_chart`, `marimekko_chart`, `squarified_treemap`,
+    `sunburst_chart`, `tree_chart`, `parallel_coordinates_chart`, `polar_line_chart`,
+    `polar_scatter_chart`;
+  - fields & networks: `density_bin_chart`, `contour_chart`, `delaunay_chart`, `vector_field_chart`,
+    `network_chart` (with the `network_node` helper).
+- **Drill-down** on `squarified_treemap` and `sunburst_chart`: `root_id` plus the `on_root_change`
+  event. See [Drill-down](#drill-down).
+
+### New in 0.3
+
+- **17 UI components**, drawn as the charts are: `sp_button`, `sp_input`, `sp_checkbox`,
+  `sp_switch`, `sp_radio_group`, `sp_slider`, `sp_rate`, `sp_segmented`, `sp_tabs` (with
+  `sp_tab_panel`), `sp_steps`, `sp_card`, `sp_tag`, `sp_badge`, `sp_divider`, `sp_progress`,
+  `sp_alert` and `sp_skeleton`. Native controls underneath, controlled from Python. See
+  [UI components](#ui-components).
+- `UI_COMPONENTS` and `UI_DEMOS`: the catalog's 17 components, their 45 reference states, and
+  `ui_demo(slug, state)` to render any of them.
+- `substrate="prussian"` is accepted everywhere (the `cyanotype` ground's substrate).
 
 ### New in 0.2
 
@@ -58,7 +84,8 @@ uv add reflex-silverpoint-react
 Nothing else to do on the JavaScript side: Reflex installs `@silverpoint/react`,
 `@silverpoint/core`, `@silverpoint/grounds` and `@silverpoint/fonts`, and every chart imports the two
 stylesheets it needs (`@silverpoint/grounds/styles.css` and the self-hosted EB Garamond of
-`@silverpoint/fonts/fonts.css`). No Tailwind, no CDN.
+`@silverpoint/fonts/fonts.css`); the UI components also import `@silverpoint/grounds/ui.css`. No
+Tailwind, no CDN.
 
 Requires Reflex 0.9.12 or later (React 19).
 
@@ -96,7 +123,7 @@ Props are the React props in `snake_case`: `xKey` → `x_key`, `hatchFill` → `
 `footerRight` → `footer_right`, `centerLabel` → `center_label`, and so on. `data` and every prop can
 be a Reflex state var.
 
-## The 33 charts
+## The 60 charts
 
 | Family | Charts |
 |---|---|
@@ -106,11 +133,60 @@ be a Reflex state var.
 | Points & grids | `scatter_chart`, `bubble_chart`, `heatmap_chart`, `treemap_chart`, `activity_grid` |
 | Flows | `sankey_chart`, `chord_ring` |
 | Radial | `donut_chart`, `radar_chart`, `polar_bar_chart`, `radial_arc_group`, `radial_rings`, `gauge_arc`, `meter_chart`, `coxcomb_chart`, `wind_rose`, `volvelle_chart`, `orbit_chart` |
+| Distributions & comparisons (0.6) | `histogram_chart`, `ecdf_chart`, `box_plot_chart`, `violin_chart`, `ridgeline_chart`, `beeswarm_chart`, `lollipop_chart`, `dumbbell_chart`, `slope_chart`, `bump_chart`, `error_bar_chart`, `interval_chart`, `diverging_bar_chart`, `connected_scatter_chart` |
+| Hierarchies & dimensions (0.6) | `waffle_chart`, `marimekko_chart`, `squarified_treemap`, `sunburst_chart`, `tree_chart`, `parallel_coordinates_chart`, `polar_line_chart`, `polar_scatter_chart` |
+| Fields & networks (0.6) | `density_bin_chart`, `contour_chart`, `delaunay_chart`, `vector_field_chart`, `network_chart` |
 
 Every factory has a class of the same name in `PascalCase` (`LineChart`, `WindRose`…).
 `reflex_silverpoint_react.CHARTS` is the whole catalog with each chart's family and the reference of
 its own props (`COMMON_PROPS` holds the shared ones), handy for galleries and documentation.
 
+With your own `data`, `ridgeline_chart` needs `group_key`, `diverging_bar_chart` needs `levels` (the
+level columns, most negative first) and `parallel_coordinates_chart` needs `dimensions` (the columns,
+in axis order). The demo datasets ignore them.
+
+`network_chart` lays its nodes out by force, the same on the server and in every browser for a given
+`seed`. Pass `nodes` to name and group them, built with `network_node`. A node with an `x` and a `y`
+is drawn there, and when every node has both no layout runs:
+
+```python
+from reflex_silverpoint_react import network_chart, network_node
+
+network_chart(
+    data=State.links,  # [{"source": "a", "target": "b", "weight": 3}, ...]
+    source_key="source",
+    target_key="target",
+    value_key="weight",
+    nodes=[network_node("a", label="Archive", group="storage"), network_node("b", label="Billing")],
+)
+```
+
+### Drill-down
+
+`squarified_treemap` and `sunburst_chart` drill down under your control. The chart keeps no root of
+its own: a click, Enter or Space on a node sends its id to `on_root_change` (the parent's id from the
+centre or the frame, `None` at the top), and you pass it back as `root_id`:
+
+```python
+class Budget(rx.State):
+    root: str | None = None
+
+    @rx.event
+    def drill(self, node_id: str | None):
+        self.root = node_id
+
+
+squarified_treemap(
+    data=rows,  # one row per node: {"id": ..., "parent": ... or None, "name": ..., "amount": ...}
+    id_key="id",
+    parent_key="parent",
+    label_key="name",
+    value_key="amount",
+    root_id=Budget.root,
+    on_root_change=Budget.drill,
+)
+```
+
 ## Props every chart shares
 
 | Prop | Default | |
@@ -192,6 +268,88 @@ dashboard(
   can also pass a plain dict.
 - The layout values and the charts' props can be state vars.
 
+## UI components
+
+New in silverpoint 0.3: seventeen interface components with frames hand-drawn by each ground's own
+inker and tone laid as hatching (`silverpoint`) or as the weight of an exact white line
+(`cyanotype`). Each is a native control underneath (a `<button>`, an `<input>`, a `<fieldset>` of
+radios), so forms submit natively and the keyboard follows the WAI-ARIA patterns. They are imported
+from `@silverpoint/react/ui`.
+
+![The UI components in the demo app](docs/ui-components.png)
+
+| Group | Components |
+|---|---|
+| Actions | `sp_button` |
+| Data entry | `sp_input`, `sp_checkbox`, `sp_radio_group`, `sp_switch`, `sp_slider`, `sp_rate`, `sp_segmented` |
+| Navigation | `sp_tabs` + `sp_tab_panel`, `sp_steps` |
+| Data display | `sp_card`, `sp_tag`, `sp_badge`, `sp_divider` |
+| Feedback | `sp_progress`, `sp_alert`, `sp_skeleton` |
+
+```python
+from reflex_silverpoint_react import sp_button, sp_input, sp_switch, sp_tab_panel, sp_tabs, ui_item
+
+
+class State(rx.State):
+    city: str = "Caracas"
+    precision: bool = False
+    view: str = "traffic"
+
+    @rx.event
+    def set_city(self, value: str):  # on_change gets the value, not an event
+        self.city = value
+
+    @rx.event
+    def set_precision(self, value: bool):
+        self.precision = value
+
+    @rx.event
+    def set_view(self, value: str):
+        self.view = value
+
+    @rx.event
+    def save(self, form: dict):
+        print(form)  # {"city": "Caracas", ...}: the native inputs submit under their name
+
+
+rx.el.form(
+    sp_input(
+        label="City",
+        name="city",
+        value=State.city,
+        on_change=State.set_city,
+        invalid=State.city == "",
+        message="Required: pick a city",
+    ),
+    sp_switch(label="Precision", checked=State.precision, on_change=State.set_precision),
+    sp_tabs(
+        sp_tab_panel(line_chart(...), value="traffic"),
+        sp_tab_panel(bar_chart(...), value="errors"),
+        items=[ui_item("traffic", "Traffic"), ui_item("errors", "Errors")],
+        value=State.view,
+        on_change=State.set_view,
+    ),
+    sp_button("Save", type="submit", variant="primary"),
+    on_submit=State.save,
+)
+```
+
+- **Shared props**: `id`, `ground`, `substrate`, `mode`, `seed`, `size` (`sm`/`md`/`lg`) and
+  `class_name`. Like charts, they fall back to the dashboard, then to `silverpoint_provider`.
+- **Values**: value components are controlled (`value=` / `checked=` with `on_change`) or
+  uncontrolled (`default_value=` / `default_checked=`). `on_change` receives the new value itself (a
+  string, a bool or a number), never a DOM event.
+- **Items**: `ui_item(key, label, disabled=False)` for tabs, segmented and radio groups;
+  `step_item(key, title, description=None, status=None)` for steps.
+- **Slots**: children are a button's or tag's text, a card's or alert's body; `sp_card` also takes
+  `extra` and `footer`, and `sp_input` takes `prefix` and `suffix` (components or text).
+- **Close events**: `sp_tag(closable=True, on_close=...)` and `sp_alert(closable=True, on_close=...)`.
+- `UI_COMPONENTS` is the catalog (group, declared states, props reference) and `UI_DEMOS` the 45
+  reference states upstream ships; `ui_demo("radio-group", "selected", ground="cyanotype")` renders
+  one, uncontrolled.
+- Text inputs controlled from state make a round trip per keystroke; for long text, prefer
+  `default_value` and read the value on submit.
+
 ## Interaction
 
 ```python
@@ -258,13 +416,15 @@ cd silverpoint_react_demo
 uv run reflex run
 ```
 
-Pages: **Start** (quickstart, provider, ink vs precision), **Gallery** (the 33 charts, ground
+Pages: **Start** (quickstart, provider, ink vs precision), **Gallery** (the 60 charts, ground
 controls, demo datasets vs data from Python state with a re-roll), **Playground** (one chart, every
 rendering choice and the Python that reproduces it), **Interaction** (events, custom readout, a
-volvelle that turns on click, live KPI/gauge/meter, SVG and geometry export), **Dashboard** (a
+volvelle that turns on click, a treemap and a sunburst that drill down together, live KPI/gauge/meter, SVG and geometry export), **Dashboard** (a
 linked operations dashboard fed from Python state with ground, substrate, mode and column controls, a
-KPI strip, and `dashboard_link` on its own) and one **reference page per chart** (`/chart/<slug>`)
-with its props. The Gallery and Playground also get a ground control, for `cyanotype`.
+KPI strip, and `dashboard_link` on its own), **UI components** (`/ui`: the components controlled from
+Python state with a native form submit, and the three reference panels of the upstream example apps
+in silverpoint ink, precision and cyanotype), one **reference page per chart** (`/chart/<slug>`) and
+one per UI component (`/ui/<slug>`: every declared state on both grounds, usage and props). The Gallery and Playground also get a ground control, for `cyanotype`.
 
 ![Interaction page](docs/interaction.png)
 

{reflex_silverpoint_react-0.2.0 → reflex_silverpoint_react-0.6.0}/README.md

@@ -7,10 +7,36 @@ prepared ground, tone built from hatching, and white heightening on the live val
 The hand-drawn irregularity lives only in the ornament. The data geometry is exact, and every chart
 has a `precision` mode that turns the inking off.
 
-It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.2.0 and exposes
-**all 33 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the
-`SilverpointProvider`, both grounds (`silverpoint` and `cyanotype`), the interaction events, custom
-readouts and the imperative handle (SVG export and geometry) as Python.
+It wraps [`@silverpoint/react`](https://www.npmjs.com/package/@silverpoint/react) 0.6.0 and exposes
+**all 60 charts**, the **`Dashboard`** (a laid-out, linkable grid of charts), the **17 UI
+components** (buttons, inputs, tabs, cards, alerts…), the `SilverpointProvider`, both grounds
+(`silverpoint` and `cyanotype`), the interaction events, custom readouts and the imperative handle
+(SVG export and geometry) as Python.
+
+### New in 0.6
+
+- **27 new charts**, the second catalog of silverpoint 0.6:
+  - distributions & comparisons: `histogram_chart`, `ecdf_chart`, `box_plot_chart`, `violin_chart`,
+    `ridgeline_chart`, `beeswarm_chart`, `lollipop_chart`, `dumbbell_chart`, `slope_chart`,
+    `bump_chart`, `error_bar_chart`, `interval_chart`, `diverging_bar_chart`, `connected_scatter_chart`;
+  - hierarchies & dimensions: `waffle_chart`, `marimekko_chart`, `squarified_treemap`,
+    `sunburst_chart`, `tree_chart`, `parallel_coordinates_chart`, `polar_line_chart`,
+    `polar_scatter_chart`;
+  - fields & networks: `density_bin_chart`, `contour_chart`, `delaunay_chart`, `vector_field_chart`,
+    `network_chart` (with the `network_node` helper).
+- **Drill-down** on `squarified_treemap` and `sunburst_chart`: `root_id` plus the `on_root_change`
+  event. See [Drill-down](#drill-down).
+
+### New in 0.3
+
+- **17 UI components**, drawn as the charts are: `sp_button`, `sp_input`, `sp_checkbox`,
+  `sp_switch`, `sp_radio_group`, `sp_slider`, `sp_rate`, `sp_segmented`, `sp_tabs` (with
+  `sp_tab_panel`), `sp_steps`, `sp_card`, `sp_tag`, `sp_badge`, `sp_divider`, `sp_progress`,
+  `sp_alert` and `sp_skeleton`. Native controls underneath, controlled from Python. See
+  [UI components](#ui-components).
+- `UI_COMPONENTS` and `UI_DEMOS`: the catalog's 17 components, their 45 reference states, and
+  `ui_demo(slug, state)` to render any of them.
+- `substrate="prussian"` is accepted everywhere (the `cyanotype` ground's substrate).
 
 ### New in 0.2
 
@@ -32,7 +58,8 @@ uv add reflex-silverpoint-react
 Nothing else to do on the JavaScript side: Reflex installs `@silverpoint/react`,
 `@silverpoint/core`, `@silverpoint/grounds` and `@silverpoint/fonts`, and every chart imports the two
 stylesheets it needs (`@silverpoint/grounds/styles.css` and the self-hosted EB Garamond of
-`@silverpoint/fonts/fonts.css`). No Tailwind, no CDN.
+`@silverpoint/fonts/fonts.css`); the UI components also import `@silverpoint/grounds/ui.css`. No
+Tailwind, no CDN.
 
 Requires Reflex 0.9.12 or later (React 19).
 
@@ -70,7 +97,7 @@ Props are the React props in `snake_case`: `xKey` → `x_key`, `hatchFill` → `
 `footerRight` → `footer_right`, `centerLabel` → `center_label`, and so on. `data` and every prop can
 be a Reflex state var.
 
-## The 33 charts
+## The 60 charts
 
 | Family | Charts |
 |---|---|
@@ -80,11 +107,60 @@ be a Reflex state var.
 | Points & grids | `scatter_chart`, `bubble_chart`, `heatmap_chart`, `treemap_chart`, `activity_grid` |
 | Flows | `sankey_chart`, `chord_ring` |
 | Radial | `donut_chart`, `radar_chart`, `polar_bar_chart`, `radial_arc_group`, `radial_rings`, `gauge_arc`, `meter_chart`, `coxcomb_chart`, `wind_rose`, `volvelle_chart`, `orbit_chart` |
+| Distributions & comparisons (0.6) | `histogram_chart`, `ecdf_chart`, `box_plot_chart`, `violin_chart`, `ridgeline_chart`, `beeswarm_chart`, `lollipop_chart`, `dumbbell_chart`, `slope_chart`, `bump_chart`, `error_bar_chart`, `interval_chart`, `diverging_bar_chart`, `connected_scatter_chart` |
+| Hierarchies & dimensions (0.6) | `waffle_chart`, `marimekko_chart`, `squarified_treemap`, `sunburst_chart`, `tree_chart`, `parallel_coordinates_chart`, `polar_line_chart`, `polar_scatter_chart` |
+| Fields & networks (0.6) | `density_bin_chart`, `contour_chart`, `delaunay_chart`, `vector_field_chart`, `network_chart` |
 
 Every factory has a class of the same name in `PascalCase` (`LineChart`, `WindRose`…).
 `reflex_silverpoint_react.CHARTS` is the whole catalog with each chart's family and the reference of
 its own props (`COMMON_PROPS` holds the shared ones), handy for galleries and documentation.
 
+With your own `data`, `ridgeline_chart` needs `group_key`, `diverging_bar_chart` needs `levels` (the
+level columns, most negative first) and `parallel_coordinates_chart` needs `dimensions` (the columns,
+in axis order). The demo datasets ignore them.
+
+`network_chart` lays its nodes out by force, the same on the server and in every browser for a given
+`seed`. Pass `nodes` to name and group them, built with `network_node`. A node with an `x` and a `y`
+is drawn there, and when every node has both no layout runs:
+
+```python
+from reflex_silverpoint_react import network_chart, network_node
+
+network_chart(
+    data=State.links,  # [{"source": "a", "target": "b", "weight": 3}, ...]
+    source_key="source",
+    target_key="target",
+    value_key="weight",
+    nodes=[network_node("a", label="Archive", group="storage"), network_node("b", label="Billing")],
+)
+```
+
+### Drill-down
+
+`squarified_treemap` and `sunburst_chart` drill down under your control. The chart keeps no root of
+its own: a click, Enter or Space on a node sends its id to `on_root_change` (the parent's id from the
+centre or the frame, `None` at the top), and you pass it back as `root_id`:
+
+```python
+class Budget(rx.State):
+    root: str | None = None
+
+    @rx.event
+    def drill(self, node_id: str | None):
+        self.root = node_id
+
+
+squarified_treemap(
+    data=rows,  # one row per node: {"id": ..., "parent": ... or None, "name": ..., "amount": ...}
+    id_key="id",
+    parent_key="parent",
+    label_key="name",
+    value_key="amount",
+    root_id=Budget.root,
+    on_root_change=Budget.drill,
+)
+```
+
 ## Props every chart shares
 
 | Prop | Default | |
@@ -166,6 +242,88 @@ dashboard(
   can also pass a plain dict.
 - The layout values and the charts' props can be state vars.
 
+## UI components
+
+New in silverpoint 0.3: seventeen interface components with frames hand-drawn by each ground's own
+inker and tone laid as hatching (`silverpoint`) or as the weight of an exact white line
+(`cyanotype`). Each is a native control underneath (a `<button>`, an `<input>`, a `<fieldset>` of
+radios), so forms submit natively and the keyboard follows the WAI-ARIA patterns. They are imported
+from `@silverpoint/react/ui`.
+
+![The UI components in the demo app](docs/ui-components.png)
+
+| Group | Components |
+|---|---|
+| Actions | `sp_button` |
+| Data entry | `sp_input`, `sp_checkbox`, `sp_radio_group`, `sp_switch`, `sp_slider`, `sp_rate`, `sp_segmented` |
+| Navigation | `sp_tabs` + `sp_tab_panel`, `sp_steps` |
+| Data display | `sp_card`, `sp_tag`, `sp_badge`, `sp_divider` |
+| Feedback | `sp_progress`, `sp_alert`, `sp_skeleton` |
+
+```python
+from reflex_silverpoint_react import sp_button, sp_input, sp_switch, sp_tab_panel, sp_tabs, ui_item
+
+
+class State(rx.State):
+    city: str = "Caracas"
+    precision: bool = False
+    view: str = "traffic"
+
+    @rx.event
+    def set_city(self, value: str):  # on_change gets the value, not an event
+        self.city = value
+
+    @rx.event
+    def set_precision(self, value: bool):
+        self.precision = value
+
+    @rx.event
+    def set_view(self, value: str):
+        self.view = value
+
+    @rx.event
+    def save(self, form: dict):
+        print(form)  # {"city": "Caracas", ...}: the native inputs submit under their name
+
+
+rx.el.form(
+    sp_input(
+        label="City",
+        name="city",
+        value=State.city,
+        on_change=State.set_city,
+        invalid=State.city == "",
+        message="Required: pick a city",
+    ),
+    sp_switch(label="Precision", checked=State.precision, on_change=State.set_precision),
+    sp_tabs(
+        sp_tab_panel(line_chart(...), value="traffic"),
+        sp_tab_panel(bar_chart(...), value="errors"),
+        items=[ui_item("traffic", "Traffic"), ui_item("errors", "Errors")],
+        value=State.view,
+        on_change=State.set_view,
+    ),
+    sp_button("Save", type="submit", variant="primary"),
+    on_submit=State.save,
+)
+```
+
+- **Shared props**: `id`, `ground`, `substrate`, `mode`, `seed`, `size` (`sm`/`md`/`lg`) and
+  `class_name`. Like charts, they fall back to the dashboard, then to `silverpoint_provider`.
+- **Values**: value components are controlled (`value=` / `checked=` with `on_change`) or
+  uncontrolled (`default_value=` / `default_checked=`). `on_change` receives the new value itself (a
+  string, a bool or a number), never a DOM event.
+- **Items**: `ui_item(key, label, disabled=False)` for tabs, segmented and radio groups;
+  `step_item(key, title, description=None, status=None)` for steps.
+- **Slots**: children are a button's or tag's text, a card's or alert's body; `sp_card` also takes
+  `extra` and `footer`, and `sp_input` takes `prefix` and `suffix` (components or text).
+- **Close events**: `sp_tag(closable=True, on_close=...)` and `sp_alert(closable=True, on_close=...)`.
+- `UI_COMPONENTS` is the catalog (group, declared states, props reference) and `UI_DEMOS` the 45
+  reference states upstream ships; `ui_demo("radio-group", "selected", ground="cyanotype")` renders
+  one, uncontrolled.
+- Text inputs controlled from state make a round trip per keystroke; for long text, prefer
+  `default_value` and read the value on submit.
+
 ## Interaction
 
 ```python
@@ -232,13 +390,15 @@ cd silverpoint_react_demo
 uv run reflex run
 ```
 
-Pages: **Start** (quickstart, provider, ink vs precision), **Gallery** (the 33 charts, ground
+Pages: **Start** (quickstart, provider, ink vs precision), **Gallery** (the 60 charts, ground
 controls, demo datasets vs data from Python state with a re-roll), **Playground** (one chart, every
 rendering choice and the Python that reproduces it), **Interaction** (events, custom readout, a
-volvelle that turns on click, live KPI/gauge/meter, SVG and geometry export), **Dashboard** (a
+volvelle that turns on click, a treemap and a sunburst that drill down together, live KPI/gauge/meter, SVG and geometry export), **Dashboard** (a
 linked operations dashboard fed from Python state with ground, substrate, mode and column controls, a
-KPI strip, and `dashboard_link` on its own) and one **reference page per chart** (`/chart/<slug>`)
-with its props. The Gallery and Playground also get a ground control, for `cyanotype`.
+KPI strip, and `dashboard_link` on its own), **UI components** (`/ui`: the components controlled from
+Python state with a native form submit, and the three reference panels of the upstream example apps
+in silverpoint ink, precision and cyanotype), one **reference page per chart** (`/chart/<slug>`) and
+one per UI component (`/ui/<slug>`: every declared state on both grounds, usage and props). The Gallery and Playground also get a ground control, for `cyanotype`.
 
 ![Interaction page](docs/interaction.png)