@sakuzu/maplibre-gl-draw 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -6,6 +6,100 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [2.1.0] - 2026-10-01
+
+The standard UI package, the documentation site with twenty examples and
+the playground on it, the event `options.changed`,
+`Dataset.getStyleRule()`, and fixes to the order of the layers after a
+diffed `setStyle`, to a drag across the antimeridian on the globe, to the
+`/geometry` functions given a feature, and to `scaleWithZoom` changed at
+runtime. Nothing changes incompatibly.
+
+### Added in 2.1.0
+
+- The event `options.changed`, with `{ options, previous }`: what
+  `draw.options.get()` returns after and before a `draw.options.update`
+  that changed a value. An update that changes nothing fires nothing,
+  and the event is not a change of the document, so it fires no
+  `document.changed`.
+- Twenty examples built with the standard UI, each with its page
+  on the site: `get-started`, `style-features`, `feature-properties`,
+  `layers-and-groups`, `style-rules-and-legend`, `snapping-and-tracing`,
+  `geometry-operations`, `images`, `editing-shapes`, `zoom-and-scale`,
+  `save-and-load`, `terrain`, `globe`, `200000-features`, `datasets`,
+  `columnar-data-in-a-worker`, `read-only-viewer`, `plugins`,
+  `custom-feature-types` and `custom-ui`. Their basemap menu offers the
+  OpenFreeMap styles.
+- A sample of Overture Maps data for the examples, in
+  `examples/public/data/` (not in the package): the 10,477 buildings and
+  the 17,558 places of central Tokyo east of the station, as GeoJSON and
+  GeoParquet. `npm run data:overture` (`scripts/fetch-overture-sample.mjs`)
+  writes them again. The buildings are under the ODbL and the places
+  under the CDLA Permissive 2.0;
+  `THIRD_PARTY_NOTICES.md` and `examples/public/data/README.md` record
+  the attribution and the licenses of every source. The `datasets`,
+  `columnar-data-in-a-worker` and `style-rules-and-legend` examples show
+  them.
+- `Dataset.getStyleRule()`, the style rule of a dataset: the
+  one last given to `setStyleRule`, or the one given to `datasets.add`,
+  or `undefined` when there is none. A legend of the datasets reads it.
+
+### Changed in 2.1.0
+
+- The site (<https://sakuzu.github.io/maplibre-gl-draw/>) is
+  the documentation site: getting started and the guides in English and
+  Japanese, a gallery of the examples, each on a page that runs it
+  beside its code, the playground under `/playground/` and the API
+  reference under `/api/`, which opens with where each resource of
+  `Draw` is. The examples with buttons of their own (`basic`,
+  `save-load`, `style-rules`, `snapping-and-geometry`, `read-only`,
+  `plugin`, `custom-feature-type`, `large-data` and `table-worker`) are
+  replaced by the examples of the gallery, and their addresses, like
+  those of the HTML pages of the API reference of 1.0 and 2.0, redirect
+  to the pages that took their place. `npm run site:dev` serves the site
+  with the examples and the playground for a local check.
+- The playground is built on the standard UI, with the tools
+  and the inspector sections of a plugin and of a custom feature type,
+  and the switches that are not tools on Shift and a letter. It opens on
+  an overview of every look one layer can hold; `?plain` opens it empty.
+- The dev server of the examples (`npm run dev`) moves from
+  port 3000 to 3200, and that of the playground
+  (`npm run dev:playground`) from 3001 to 3300. They and
+  `npm run test:e2e` need the standard UI built first
+  (`npm run ui:build`).
+- No sample geometry of the examples, the scenes of the
+  playground or the development page of the standard UI lies over the
+  Imperial Palace, its East Gardens or Kitanomaru Park. Each page keeps
+  its data in a `data.ts` of its own, and a test walks all of it and
+  fails when anything reaches into that area.
+
+### Fixed in 2.1.0
+
+- After `map.setStyle` in its default diff mode, the drawing is
+  on top of the map again. maplibre leaves custom layers out of the
+  style it diffs, so the layers of the new style were added above the
+  drawing and hid it. The layers of the instance now move back on top on
+  every `style.load`, in their order, with the map layers placed between
+  them; a full `setStyle` (`diff: false`) works as before.
+- `draw.options.update({ scaleWithZoom })` reaches the drawing
+  modes at once. They kept the value given to `createDraw`, so a feature
+  drawn after the option was turned off still got a reference zoom
+  (`maplibre-gl-draw:createdZoom`), and one drawn after it was turned on
+  got none.
+- The functions of `/geometry` take a feature of the drawing as it
+  is, as documented. A feature whose `type` names a geometry type
+  (`Polygon`, `LineString` and so on) was read as a geometry and threw a
+  `GeometryError` (`invalid-input`); an object with a `geometry` member
+  that is a geometry is now read as a feature first, whatever its own
+  `type`.
+- On the globe, a freehand stroke drawn across the antimeridian is
+  drawn as the stroke alone. The globe gives the pointer longitudes in
+  [-180, 180], so where the pointer crossed the line (or slid along the
+  edge of the sphere past it) the next point of the stroke was 360
+  degrees from the one before, and a line went once round the globe
+  along the parallel. The coordinates of a press now run on past 180 as
+  they do on the flat map.
+
 ## [2.0.0] - 2026-09-30
 
 2.0.0 redesigns the public API around resources and their collections.
@@ -1052,6 +1146,5 @@ available from Kasika, Inc.
 - A read-only mode and an interaction lock.
 - Plugins, custom modes and custom feature types.
 
-[Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.0.0...HEAD
 [2.0.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v1.0.0...v2.0.0
 [1.0.0]: https://github.com/sakuzu/maplibre-gl-draw/releases/tag/v1.0.0

package/README.ja.md

@@ -10,7 +10,7 @@
 
 このページの正は英語版 ([README.md](README.md)) です。
 
-![東京駅周辺の playground。半透明で重なる円、細い線から太い線、破線と点線、枠と頂点ハンドルが付いた選択中の穴あき多角形、マルチポリゴン、円と四角と三角と星のマーカー、画像を囲むフリーハンドの線、不透明度を下げたレイヤー、カテゴリーのスタイル規則で塗り分けた区画、段階区分の規則で塗り分けた細かい六角形と凡例、レイヤーとグループの階層を示すレイヤーパネル](docs/images/overview.jpg)
+![東京駅周辺の playground。半透明で重なる円、細い線から太い線、破線と点線、輪郭が実線と破線と点線の面、枠と頂点ハンドルが付いた選択中の穴あき多角形、マルチポリゴン、円と四角と三角と星のマーカー、画像を囲むフリーハンドの線、不透明度を下げたレイヤー、カテゴリーのスタイル規則で塗り分けた区画、段階区分の規則で塗り分けた細かい六角形、レイヤーとグループと六角形のデータセットを並べたレイヤーのタブ (隣の凡例のタブに 2 つの規則が出ます)、選んだ多角形のインスペクター](docs/images/overview.jpg)
 
 ## 機能
 
@@ -122,28 +122,36 @@ GeoJSON の properties を持つので、ファイルはコードで読む地物
 ブラウザーですぐに試せます。インストールは要りません。
 
 - [プレイグラウンド][demo]
-  - すべての機能を 1 つの画面で。レイヤーとプロパティのパネル付き
-- [基本][ex-basic]
-  - 面の描画、変更のイベント、保存と復元
-- [書き出しと読み込み][ex-save-load]
-  - GeoJSON と独自形式の書き出し、地図に落としたファイルの読み込み
-- [スタイル規則][ex-style-rules]
+  - すべての機能を 1 つの画面で。標準の UI 付き
+- [例][examples]
+  - 20 の例。どれも、例を動かすページにそのコードを添えています
+
+例の一部を挙げます。
+
+- [Get started][ex-get-started]
+  - 地物を描き、選び、パネルで直す
+- [Save and load][ex-save-and-load]
+  - GeoJSON と独自形式、地図に落としたファイル、読み込みで外された地物
+- [Style rules and legend][ex-style-rules-and-legend]
   - 属性の値で色を分ける 4 種類の規則と凡例
-- [吸着と幾何演算][ex-snapping-and-geometry]
-  - 吸着、境界のなぞり、共有する頂点の同時移動、結合、切り抜き、
-    バッファ、分割
-- [3D 地形][ex-terrain]
-  - 3D 地形の上での描画と選択
-- [閲覧専用][ex-read-only]
-  - 閲覧専用モード、操作のロック、ロックしたレイヤー
-- [プラグイン][ex-plugin]
-  - イベント、API、独自のモードを持つプラグイン
-- [独自の地物型][ex-custom-feature-type]
+- [Snapping and tracing][ex-snapping-and-tracing] と
+  [Geometry operations][ex-geometry-operations]
+  - 吸着、境界のなぞり、結合、交差、差、分割、バッファー
+- [Terrain][ex-terrain]
+  - 3D 地形の上での描画と編集
+- [Read-only viewer][ex-read-only-viewer]
+  - 見るための描画。閲覧専用、操作のロック、クリックした地物の属性
+- [Plugins][ex-plugins]
+  - 独自のモードを持つプラグインと、標準の UI に足すその道具
+- [Custom feature types][ex-custom-feature-types]
   - 独自の描き方、当たり判定、範囲選択を持つ地物の型
-- [データセット][ex-large-data]
-  - 5 万のマス目の色分けと、見えている範囲の点の取り寄せ
-- [100 万の点][ex-table-worker]
-  - Worker で読み込む 100 万の点
+- [Datasets][ex-datasets]
+  - Overture Maps の東京都心の建物と場所を描画の下と上に。場所は
+    見えている範囲の分を取り寄せる
+- [Columnar data in a Worker][ex-columnar-data-in-a-worker]
+  - 同じ建物を Worker で GeoParquet から読み込み、列のまま描く
+- [Build your own UI][ex-custom-ui]
+  - 標準の UI を使わない、自分の道具のバーとパネル
 
 ## インストール
 
@@ -191,8 +199,9 @@ document.querySelector('#save')?.addEventListener('click', () => {
 });
 ```
 
-ページ全体は [examples/basic/](examples/basic/) にあります。
-[はじめかた](docs/getting-started.ja.md) で順を追って説明しています。
+[はじめかた](docs/getting-started.ja.md) では、このページを順を追って
+作ります。[Get started][ex-get-started] の例は、自分のボタンの代わりに
+標準の UI を地図に重ねます。
 
 ## 入口
 
@@ -231,7 +240,8 @@ document.querySelector('#save')?.addEventListener('click', () => {
 [docs/README.ja.md](docs/README.ja.md) に、はじめかた、手引き、
 リファレンス、内部の文書を読む順に並べています。1.0、mapbox-gl-draw、
 terra-draw から移る場合は [移行](docs/guides/migrating.ja.md) を参照して
-ください。
+ください。[API リファレンス][api] のメインのエントリーのページは、
+インスタンスの資源とそれぞれのメソッドの一覧から始まります。
 
 ## 開発に参加する
 
@@ -254,15 +264,18 @@ AGPL が製品に合わない場合は、Kasika, Inc. (可視化技研株式会
 
 [maplibre]: https://maplibre.org/maplibre-gl-js/docs/
 [custom-layer]: https://maplibre.org/maplibre-gl-js/docs/API/interfaces/CustomLayerInterface/
-[demo]: https://sakuzu.github.io/maplibre-gl-draw/
+[demo]: https://sakuzu.github.io/maplibre-gl-draw/playground/
 [api]: https://sakuzu.github.io/maplibre-gl-draw/api/
-[ex-basic]: https://sakuzu.github.io/maplibre-gl-draw/examples/basic/
-[ex-save-load]: https://sakuzu.github.io/maplibre-gl-draw/examples/save-load/
-[ex-style-rules]: https://sakuzu.github.io/maplibre-gl-draw/examples/style-rules/
-[ex-snapping-and-geometry]: https://sakuzu.github.io/maplibre-gl-draw/examples/snapping-and-geometry/
-[ex-terrain]: https://sakuzu.github.io/maplibre-gl-draw/examples/terrain/
-[ex-read-only]: https://sakuzu.github.io/maplibre-gl-draw/examples/read-only/
-[ex-plugin]: https://sakuzu.github.io/maplibre-gl-draw/examples/plugin/
-[ex-custom-feature-type]: https://sakuzu.github.io/maplibre-gl-draw/examples/custom-feature-type/
-[ex-large-data]: https://sakuzu.github.io/maplibre-gl-draw/examples/large-data/
-[ex-table-worker]: https://sakuzu.github.io/maplibre-gl-draw/examples/table-worker/
+[examples]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/
+[ex-get-started]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/get-started.html
+[ex-save-and-load]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/save-and-load.html
+[ex-style-rules-and-legend]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/style-rules-and-legend.html
+[ex-snapping-and-tracing]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/snapping-and-tracing.html
+[ex-geometry-operations]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/geometry-operations.html
+[ex-terrain]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/terrain.html
+[ex-read-only-viewer]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/read-only-viewer.html
+[ex-plugins]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/plugins.html
+[ex-custom-feature-types]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/custom-feature-types.html
+[ex-datasets]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/datasets.html
+[ex-columnar-data-in-a-worker]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/columnar-data-in-a-worker.html
+[ex-custom-ui]: https://sakuzu.github.io/maplibre-gl-draw/ja/examples/custom-ui.html

package/README.md

@@ -8,7 +8,7 @@ it does on a flat map.
 [Demos][demo] | [Documentation](docs/README.md) | [API reference][api] |
 [日本語](README.ja.md)
 
-![The playground over central Tokyo: overlapping translucent circles, lines from thin to thick, dashed and dotted lines, a polygon with a hole selected with its frame and vertex handles, a multipolygon, circle, square, triangle and star markers, a freehand loop around an image, a faded layer, parcels colored by a categorical rule, a fine hexagon grid colored by a graduated rule, a legend, and the Layers panel showing layers and groups](docs/images/overview.jpg)
+![The playground over central Tokyo: overlapping translucent circles, lines from thin to thick, dashed and dotted lines, areas with a solid, a dashed and a dotted outline, a polygon with a hole selected with its frame and vertex handles, a multipolygon, circle, square, triangle and star markers, a freehand loop around an image, a faded layer, parcels colored by a categorical rule, a fine hexagon grid colored by a graduated rule, the Layers tab listing the layers, the groups and the hexagon dataset (the Legend tab beside it lists both rules), and the inspector of the selected polygon](docs/images/overview.jpg)
 
 ## Features
 
@@ -126,31 +126,41 @@ returns ([plugins](docs/guides/plugins.md),
 Try them in the browser, with nothing to install.
 
 - [Playground][demo]
-  - Every feature in one editor, with layer and property panels
-- [Basic][ex-basic]
-  - Drawing polygons, the change events, saving and restoring
-- [Export and load][ex-save-load]
-  - Export as GeoJSON and in the native format, loading files dropped on
-    the map
-- [Style rules][ex-style-rules]
+  - Every feature in one editor, with the standard UI
+- [Examples][examples]
+  - Twenty examples, each on a page that runs it beside its code
+
+Among the examples:
+
+- [Get started][ex-get-started]
+  - Drawing, selecting and changing features in the panel
+- [Save and load][ex-save-and-load]
+  - GeoJSON and the native format, files dropped on the map, the
+    features a load leaves out
+- [Style rules and legend][ex-style-rules-and-legend]
   - The four kinds of style rule that color features by a property, with
     a legend
-- [Snapping and geometry][ex-snapping-and-geometry]
-  - Snapping, tracing a boundary, moving shared vertices, union,
-    subtract, buffer and split
-- [3D terrain][ex-terrain]
-  - Drawing and selecting on 3D terrain
-- [Read-only][ex-read-only]
-  - The read-only mode, the interaction lock and locked layers
-- [Plugin][ex-plugin]
-  - A plugin with an event, an API and a mode of its own
-- [Custom feature type][ex-custom-feature-type]
+- [Snapping and tracing][ex-snapping-and-tracing] and
+  [geometry operations][ex-geometry-operations]
+  - Snapping, tracing a boundary, union, intersection, difference, split
+    and buffer
+- [Terrain][ex-terrain]
+  - Drawing and editing on 3D terrain
+- [Read-only viewer][ex-read-only-viewer]
+  - A drawing to look at: read-only, the interaction lock, the attributes
+    of the feature clicked
+- [Plugins][ex-plugins]
+  - A plugin with a mode of its own, and its tool in the standard UI
+- [Custom feature types][ex-custom-feature-types]
   - A kind of feature with its own drawing, hit test and box selection
-- [Datasets][ex-large-data]
-  - 50,000 cells colored by a property, and points fetched for the part
-    of the map in view
-- [A million points][ex-table-worker]
-  - A million points read in a Worker
+- [Datasets][ex-datasets]
+  - The buildings and places of central Tokyo from Overture Maps, under
+    and over the drawing, with places fetched for the part in view
+- [Columnar data in a Worker][ex-columnar-data-in-a-worker]
+  - The same buildings read from GeoParquet in a Worker and drawn from
+    their columns
+- [Build your own UI][ex-custom-ui]
+  - A toolbar and a panel of your own, without the standard UI
 
 ## Installation
 
@@ -198,8 +208,9 @@ document.querySelector('#save')?.addEventListener('click', () => {
 });
 ```
 
-The complete page is [examples/basic/](examples/basic/), and
-[getting started](docs/getting-started.md) walks through it step by step.
+[Getting started](docs/getting-started.md) builds this page step by
+step, and the [Get started][ex-get-started] example lays the standard UI
+over the map in place of your own buttons.
 
 ## Entry points
 
@@ -239,6 +250,8 @@ Import from the main entry unless you need one of the others.
 [docs/README.md](docs/README.md) lists every document in reading order:
 getting started, the guides, the reference and the internals. Moving from
 1.0, mapbox-gl-draw or terra-draw? See [migrating](docs/guides/migrating.md).
+The page of the main entry in the [API reference][api] opens with a list
+of the resources of the instance and the methods each one has.
 
 ## Contributing
 
@@ -261,15 +274,18 @@ The notices of the third-party code this package contains are in
 
 [maplibre]: https://maplibre.org/maplibre-gl-js/docs/
 [custom-layer]: https://maplibre.org/maplibre-gl-js/docs/API/interfaces/CustomLayerInterface/
-[demo]: https://sakuzu.github.io/maplibre-gl-draw/
+[demo]: https://sakuzu.github.io/maplibre-gl-draw/playground/
 [api]: https://sakuzu.github.io/maplibre-gl-draw/api/
-[ex-basic]: https://sakuzu.github.io/maplibre-gl-draw/examples/basic/
-[ex-save-load]: https://sakuzu.github.io/maplibre-gl-draw/examples/save-load/
-[ex-style-rules]: https://sakuzu.github.io/maplibre-gl-draw/examples/style-rules/
-[ex-snapping-and-geometry]: https://sakuzu.github.io/maplibre-gl-draw/examples/snapping-and-geometry/
-[ex-terrain]: https://sakuzu.github.io/maplibre-gl-draw/examples/terrain/
-[ex-read-only]: https://sakuzu.github.io/maplibre-gl-draw/examples/read-only/
-[ex-plugin]: https://sakuzu.github.io/maplibre-gl-draw/examples/plugin/
-[ex-custom-feature-type]: https://sakuzu.github.io/maplibre-gl-draw/examples/custom-feature-type/
-[ex-large-data]: https://sakuzu.github.io/maplibre-gl-draw/examples/large-data/
-[ex-table-worker]: https://sakuzu.github.io/maplibre-gl-draw/examples/table-worker/
+[examples]: https://sakuzu.github.io/maplibre-gl-draw/examples/
+[ex-get-started]: https://sakuzu.github.io/maplibre-gl-draw/examples/get-started.html
+[ex-save-and-load]: https://sakuzu.github.io/maplibre-gl-draw/examples/save-and-load.html
+[ex-style-rules-and-legend]: https://sakuzu.github.io/maplibre-gl-draw/examples/style-rules-and-legend.html
+[ex-snapping-and-tracing]: https://sakuzu.github.io/maplibre-gl-draw/examples/snapping-and-tracing.html
+[ex-geometry-operations]: https://sakuzu.github.io/maplibre-gl-draw/examples/geometry-operations.html
+[ex-terrain]: https://sakuzu.github.io/maplibre-gl-draw/examples/terrain.html
+[ex-read-only-viewer]: https://sakuzu.github.io/maplibre-gl-draw/examples/read-only-viewer.html
+[ex-plugins]: https://sakuzu.github.io/maplibre-gl-draw/examples/plugins.html
+[ex-custom-feature-types]: https://sakuzu.github.io/maplibre-gl-draw/examples/custom-feature-types.html
+[ex-datasets]: https://sakuzu.github.io/maplibre-gl-draw/examples/datasets.html
+[ex-columnar-data-in-a-worker]: https://sakuzu.github.io/maplibre-gl-draw/examples/columnar-data-in-a-worker.html
+[ex-custom-ui]: https://sakuzu.github.io/maplibre-gl-draw/examples/custom-ui.html

package/THIRD_PARTY_NOTICES.md

@@ -273,3 +273,32 @@ OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
 TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
 THIS SOFTWARE.
 ```
+
+---
+
+## Sample data of the examples (Overture Maps)
+
+The examples of the repository (`examples/`, not part of the package)
+show buildings and places of central Tokyo from Overture Maps, in
+`examples/public/data/`. `scripts/fetch-overture-sample.mjs` extracts
+them, and `examples/public/data/README.md` records the release, the
+extent, the counts and the sources of the rows.
+
+Attribution: © OpenStreetMap contributors, Overture Maps Foundation.
+
+- The buildings (`tokyo-buildings.geojson` and `tokyo-buildings.parquet`)
+  are a database derived from Overture's buildings theme, under the Open
+  Database License 1.0 (ODbL): <https://opendatacommons.org/licenses/odbl/1-0/>.
+  Its rows come from OpenStreetMap and Microsoft's Global ML Building
+  Footprints (ODbL), and from Qian Shi, et al., A First High-quality
+  Vector Data of Buildings in East Asian Countries Based on a
+  Comprehensive Large-scale Mapping Framework, Zenodo,
+  doi:10.5281/zenodo.8174931 (CC BY 4.0)
+- The places (`tokyo-places.geojson`) come from Overture's places theme,
+  under the Community Data License Agreement Permissive 2.0:
+  <https://cdla.dev/permissive-2-0/>. Rows from Foursquare are under the
+  Apache License 2.0 (Copyright 2024 Foursquare Labs, Inc.), and rows from
+  AllThePlaces under CC0 1.0
+
+The terms of every source are on
+<https://docs.overturemaps.org/attribution/>.

package/dist/api/datasets.d.ts

@@ -154,6 +154,11 @@ export interface Dataset {
     setTable(table: Table | PreparedTable): void;
     /** Replaces the style rule; `undefined` removes it. */
     setStyleRule(rule: StyleRule | undefined): void;
+    /**
+     * The style rule, or `undefined` when none is set: the rule last given to `setStyleRule`, or
+     * the one given to `datasets.add` when it was not replaced.
+     */
+    getStyleRule(): StyleRule | undefined;
     /** Replaces the scale factor and the opacity by zoom; `null` removes them. */
     setZoomScale(zoomScale: DatasetZoomScale | null): void;
     /** The scale factor and the opacity by zoom, or `null` when none is set. */

package/dist/api/draw.d.ts

@@ -123,10 +123,12 @@ export interface Draw {
 /**
  * Puts a draw instance on a map and returns it.
  *
- * It can be called before, while or after the map loads. The layers are added as soon as the
- * style accepts them, and added again after `setStyle`. Unless `initDefaultLayer: false` is
- * given, the document starts with one empty layer. Several instances can share a page, each on
- * its own map.
+ * It can be called before, while or after the map loads. The layers are added on top of the map
+ * as soon as the style accepts them. After `setStyle`, with or without `diff`, they are on top
+ * again: added again after a full replacement, and moved above the layers of the new style after
+ * a diff. A layer added to the map later goes above them and stays there until the style changes.
+ * Unless `initDefaultLayer: false` is given, the document starts with one empty layer. Several
+ * instances can share a page, each on its own map.
  *
  * @param map - The map to draw on
  * @param options - The options; every one can be omitted

package/dist/api/draw.js

@@ -4,10 +4,12 @@ import { createDraw as createDrawInstance } from './impl/create-draw.js';
 /**
  * Puts a draw instance on a map and returns it.
  *
- * It can be called before, while or after the map loads. The layers are added as soon as the
- * style accepts them, and added again after `setStyle`. Unless `initDefaultLayer: false` is
- * given, the document starts with one empty layer. Several instances can share a page, each on
- * its own map.
+ * It can be called before, while or after the map loads. The layers are added on top of the map
+ * as soon as the style accepts them. After `setStyle`, with or without `diff`, they are on top
+ * again: added again after a full replacement, and moved above the layers of the new style after
+ * a diff. A layer added to the map later goes above them and stays there until the style changes.
+ * Unless `initDefaultLayer: false` is given, the document starts with one empty layer. Several
+ * instances can share a page, each on its own map.
  *
  * @param map - The map to draw on
  * @param options - The options; every one can be omitted

package/dist/api/events.d.ts

@@ -10,6 +10,7 @@ import type { DrawError } from './errors.js';
 import type { Hit } from './extension/provider.js';
 import type { UpdateSource } from './extension/store.js';
 import type { Feature, FeatureInput, FileData, Group, Layer, LoadResult, Metadata, MoveTarget } from './model.js';
+import type { RuntimeOptions } from './options.js';
 import type { LayerStackEntry, Mode, Selection, SelectionType, SnapResult, VertexSelection } from './state.js';
 /** A point on the screen, as `[x, y]` in CSS pixels. */
 export type ScreenPoint = [number, number];
@@ -231,6 +232,15 @@ export interface DrawEvents {
     'interactionLock.changed': {
         locked: boolean;
     };
+    /**
+     * `draw.options.update` changed the options; `options` and `previous` are what
+     * `draw.options.get()` returns after and before the change. An update that leaves every
+     * value as it was does not fire it
+     */
+    'options.changed': {
+        options: Readonly<RuntimeOptions>;
+        previous: Readonly<RuntimeOptions>;
+    };
     /** The snapping target changed */
     'snap.changed': {
         result: SnapResult | null;

package/dist/api/impl/create-draw.js

@@ -24,7 +24,7 @@ const ASYNC_MEMBERS = new Set(['document.load', 'document.loadMany']);
  * @internal
  */
 export function createDrawOnEngine(engine, options = {}, setExternalEntry = () => { }) {
-    const drawOptions = createOptions(engine, options, setExternalEntry);
+    const drawOptions = createOptions(engine, options, setExternalEntry, (payload) => engine.events.emit('options.changed', payload));
     drawOptions.applyCreation();
     const { context, modeManager, events, map } = engine;
     const { store } = context;

package/dist/api/impl/datasets.js

@@ -258,6 +258,7 @@ export function wrapDataset(dataset) {
                 throw invalidInput('The rule must be an object');
             dataset.setStyleRule(rule);
         },
+        getStyleRule: () => dataset.getStyleRule(),
         setZoomScale(zoomScale) {
             if (zoomScale !== null)
                 checkFunction(zoomScale, 'zoomScale');

package/dist/api/impl/events.js

@@ -10,7 +10,8 @@
  * `document.changed` with the whole
  * change when the transaction changed the document. The engine announces the rest
  * on its internal emitter (snapping, clicks, images, the stacking order, failed loads,
- * drags), and each is passed on under its name here.
+ * drags), and each is passed on under its name here. `options.changed` comes from
+ * `draw.options`, which emits it on the same hub.
  */
 import { DRAW_PROPERTY_KEYS } from '../../shared/properties.js';
 import { geometryFromCoordinates } from '../../shared/utils/coordinates.js';

package/dist/api/impl/extension-host.js

@@ -164,7 +164,10 @@ export function createExtensionHost(deps) {
         },
         getWritableLayerId: context.getWritableLayerId,
         generateId: context.generateFeatureId,
-        scaleWithZoom: context.options.scaleWithZoom,
+        // Read when a feature is committed, so a change of the option applies at once
+        get scaleWithZoom() {
+            return context.options.scaleWithZoom;
+        },
         selectionStyle: context.selectionStyle,
         boxSelectionStyle: context.renderingConfig.boxSelectionStyle,
         notifyDrawCommit: (feature) => announceDrawCommit(feature),

package/dist/api/impl/options.js

@@ -656,9 +656,10 @@ function assignInPlace(target, source) {
  * @param options - The options the instance was created with
  * @param setExternalEntry - Replaces the function that tells the entries from outside the
  *   document
+ * @param onChanged - Receives the options after and before an update that changed them
  * @internal
  */
-export function createOptions(engine, options, setExternalEntry) {
+export function createOptions(engine, options, setExternalEntry, onChanged = () => { }) {
     const { context, map, customLayer } = engine;
     let current = runtimePart(options);
     const apply = (patch) => {
@@ -758,39 +759,44 @@ export function createOptions(engine, options, setExternalEntry) {
         else if (redraw)
             map.triggerRepaint();
     };
+    const get = () => {
+        const { snapService, trace, topology, pixelRatioSource, renderingConfig } = context;
+        const snap = snapService.getOptions();
+        const values = {
+            ...current,
+            scaleWithZoom: context.options.scaleWithZoom,
+            clickTolerance: context.options.clickTolerance,
+            dragThreshold: context.options.dragThreshold,
+            snapping: {
+                ...current.snapping,
+                enabled: snap.enabled,
+                tolerancePx: snap.tolerancePx,
+                disableKey: snap.disableKey,
+                kinds: { ...snap.kinds },
+                datasets: snap.datasets,
+                guideStepDegrees: snap.guideStepDegrees,
+            },
+            tracing: { enabled: trace.enabled },
+            topology: { sharedVertexDrag: topology.sharedVertexDrag },
+            rendering: {
+                ...current.rendering,
+                renderScale: pixelRatioSource.getScaleFactor(),
+                cacheGeometry: renderingConfig.storeRetained !== false,
+                timeSlicing: renderingConfig.timeSlicing !== false,
+            },
+        };
+        return structuredCloneOptions(values);
+    };
     return {
-        get() {
-            const { snapService, trace, topology, pixelRatioSource, renderingConfig } = context;
-            const snap = snapService.getOptions();
-            const values = {
-                ...current,
-                scaleWithZoom: context.options.scaleWithZoom,
-                clickTolerance: context.options.clickTolerance,
-                dragThreshold: context.options.dragThreshold,
-                snapping: {
-                    ...current.snapping,
-                    enabled: snap.enabled,
-                    tolerancePx: snap.tolerancePx,
-                    disableKey: snap.disableKey,
-                    kinds: { ...snap.kinds },
-                    datasets: snap.datasets,
-                    guideStepDegrees: snap.guideStepDegrees,
-                },
-                tracing: { enabled: trace.enabled },
-                topology: { sharedVertexDrag: topology.sharedVertexDrag },
-                rendering: {
-                    ...current.rendering,
-                    renderScale: pixelRatioSource.getScaleFactor(),
-                    cacheGeometry: renderingConfig.storeRetained !== false,
-                    timeSlicing: renderingConfig.timeSlicing !== false,
-                },
-            };
-            return structuredCloneOptions(values);
-        },
+        get,
         update(patch) {
             checkPatch(patch);
+            const previous = get();
             current = mergeOptions(current, patch);
             apply(patch);
+            const next = get();
+            if (!sameOptions(previous, next))
+                onChanged({ options: next, previous });
         },
         getStyle() {
             return current.style;
@@ -809,6 +815,29 @@ export function createOptions(engine, options, setExternalEntry) {
         },
     };
 }
+/**
+ * Whether two copies of the options hold the same values: plain objects and arrays are
+ * compared item by item, a function by identity, and a key given as `undefined` is the same
+ * as a key left out
+ */
+function sameOptions(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (Array.isArray(a) || Array.isArray(b)) {
+        return (Array.isArray(a) &&
+            Array.isArray(b) &&
+            a.length === b.length &&
+            a.every((item, i) => sameOptions(item, b[i])));
+    }
+    if (!isRecord(a) || !isRecord(b))
+        return false;
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const key of keys) {
+        if (!sameOptions(a[key], b[key]))
+            return false;
+    }
+    return true;
+}
 /** A copy of the options that shares the functions and nothing else */
 function structuredCloneOptions(value) {
     if (Array.isArray(value))

package/dist/dataset/dataset.js

@@ -347,6 +347,9 @@ export class DatasetImpl {
     getBaseStyle() {
         return this.styler.base;
     }
+    getStyleRule() {
+        return this.styler.rule;
+    }
     getFeatures() {
         return this.source.features();
     }

package/dist/dataset/types.d.ts

@@ -306,6 +306,8 @@ export interface Dataset {
     setTable(table: Table | PreparedTable): void;
     /** Replaces the style rule (undefined clears it) */
     setStyleRule(rule: StyleRule | undefined): void;
+    /** The style rule in effect (undefined when not set) */
+    getStyleRule(): StyleRule | undefined;
     /**
      * Replaces the zoom-dependent drawing factors (null clears them)
      *

package/dist/dispatcher/input-router.js

@@ -39,7 +39,8 @@ function firstTentativeCoordinate(tentative) {
  *   little beyond ±180; the rendering and the export deal with that
  * - A drag moves every coordinate of its events by the one shift decided from where it started
  *   (`dragStartLngLat`), so the distance dragged never jumps by 360 degrees when the pointer
- *   crosses the antimeridian during the drag
+ *   crosses the antimeridian during the drag. The normalizer gives the positions of a press
+ *   continuously (the globe's jump from 180 to -180 included), so one shift keeps them so
  *
  * Away from the antimeridian, on the main copy of the world, nothing changes and the event is
  * returned as it is.

package/dist/dispatcher/normalizer.js

@@ -1,5 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { nearestLongitude } from '../shared/math/longitude.js';
 import { getModifiers } from './types.js';
 const DEFAULT_OPTIONS = {
     dragThreshold: 3,
@@ -51,6 +52,20 @@ function createProfiles(opts) {
         },
     };
 }
+/**
+ * The position of the pointer, on the copy of the world nearest to where it was last
+ *
+ * The flat map gives the pointer unwrapped longitudes, which run on past 180 as it crosses the
+ * antimeridian. The globe gives them in [-180, 180], so they jump by 360 degrees there: a
+ * freehand stroke drawn from them went once round the world along the parallel, and the shift
+ * of a feature dragged across jumped by a turn. Within a press each position is therefore
+ * taken on the copy nearest to the last one, so the pointer moves on continuously, as on the
+ * flat map. A position within 180 degrees of the last one is returned unchanged.
+ */
+function continuing(lngLat, last) {
+    const lng = nearestLongitude(lngLat.lng, last.lng);
+    return lng === lngLat.lng ? lngLat : { lng, lat: lngLat.lat };
+}
 /**
  * Whether a mouse event is the compatibility event a browser emits for a touch
  */
@@ -184,7 +199,8 @@ export function createInputNormalizer(map, options = {}) {
      *
      * Once the press has become a drag it stays one until it is released.
      */
-    function movePress(current, point, lngLat, originalEvent) {
+    function movePress(current, point, rawLngLat, originalEvent) {
+        const lngLat = continuing(rawLngLat, current.lastLngLat);
         current.lastPoint = point;
         current.lastLngLat = lngLat;
         current.lastEvent = originalEvent;
@@ -204,7 +220,8 @@ export function createInputNormalizer(map, options = {}) {
      * Releases the press: dragend (when dragging) and mouseup. Returns whether the release
      * is a click candidate.
      */
-    function releasePress(current, point, lngLat, originalEvent) {
+    function releasePress(current, point, rawLngLat, originalEvent) {
+        const lngLat = continuing(rawLngLat, current.lastLngLat);
         clearLongPress(current);
         press = null;
         if (current.dragging) {

package/dist/geometry/geojson.d.ts

@@ -23,6 +23,10 @@ export type LineInput = LineString | MultiLineString | {
  * Returns the geometry of a geometry, or of anything that carries one in a `geometry` field
  * (a GeoJSON feature, a feature of the drawing)
  *
+ * A value whose `geometry` member is a geometry is read as a feature first, whatever its own
+ * `type` says: a feature of the drawing names its feature type there (`'Polygon'`,
+ * `'Circle'`, `'Freehand'` and so on), which is not the type of a geometry it is.
+ *
  * @throws GeometryError (`invalid-input`) for a value that is neither, and for a feature
  *   without a geometry
  */

package/dist/geometry/geojson.js

@@ -24,6 +24,10 @@ function isPosition(value) {
  * Returns the geometry of a geometry, or of anything that carries one in a `geometry` field
  * (a GeoJSON feature, a feature of the drawing)
  *
+ * A value whose `geometry` member is a geometry is read as a feature first, whatever its own
+ * `type` says: a feature of the drawing names its feature type there (`'Polygon'`,
+ * `'Circle'`, `'Freehand'` and so on), which is not the type of a geometry it is.
+ *
  * @throws GeometryError (`invalid-input`) for a value that is neither, and for a feature
  *   without a geometry
  */
@@ -32,26 +36,31 @@ export function geometryOf(input, operation) {
     if (!isObject(value)) {
         throw invalidInput(operation, 'the input is not a geometry or a feature');
     }
-    if (!isGeometryType(value.type)) {
-        if (!('geometry' in value) && value.type !== 'Feature') {
-            throw invalidInput(operation, 'the input is not a geometry or a feature');
-        }
+    if ('geometry' in value || value.type === 'Feature') {
         const geometry = value.geometry;
-        if (!isObject(geometry) || !isGeometryType(geometry.type)) {
+        if (isObject(geometry) && isGeometryType(geometry.type)) {
+            return geometryOf(geometry, operation);
+        }
+        if (!isGeometry(value)) {
             throw invalidInput(operation, 'the feature has no geometry');
         }
-        return geometryOf(geometry, operation);
     }
-    if (value.type === 'GeometryCollection') {
-        if (!Array.isArray(value.geometries)) {
-            throw invalidInput(operation, 'the geometry collection has no geometries');
-        }
+    if (value.type === 'GeometryCollection' && !Array.isArray(value.geometries)) {
+        throw invalidInput(operation, 'the geometry collection has no geometries');
     }
-    else if (!Array.isArray(value.coordinates)) {
+    if (!isGeometry(value)) {
         throw invalidInput(operation, 'the input is not a geometry or a feature');
     }
     return value;
 }
+/** Whether an object has the type of a geometry and the member that type carries */
+function isGeometry(value) {
+    if (!isGeometryType(value.type))
+        return false;
+    if (value.type === 'GeometryCollection')
+        return Array.isArray(value.geometries);
+    return Array.isArray(value.coordinates);
+}
 /** Whether a value names a GeoJSON geometry type */
 function isGeometryType(type) {
     return typeof type === 'string' && (COORDINATE_TYPES.has(type) || type === 'GeometryCollection');

package/dist/index.d.ts

@@ -17,6 +17,20 @@
  * });
  * ```
  *
+ * Where to find things: every resource of {@link Draw} is a field with its own methods.
+ *
+ * - `draw.features` (create, update, delete, move, union, split): {@link FeaturesCollection}
+ * - `draw.layers` (create, update, reorder, setActive): {@link LayersCollection}
+ * - `draw.groups` (create, update, move): {@link GroupsCollection}
+ * - `draw.datasets` (add, remove, move): {@link DatasetsCollection}
+ * - `draw.selection` (set, add, clear, delete, group): {@link SelectionResource}
+ * - `draw.vertexSelection` (set, clear, delete): {@link VertexSelectionResource}
+ * - `draw.metadata` and `draw.options` (get, update): {@link MetadataResource}, {@link OptionsResource}
+ * - `draw.document` (load, toJSON, toGeoJSON): {@link DocumentResource}
+ * - `draw.drawing` (addVertex, finish, cancel): {@link DrawingResource}
+ * - `draw.extensions` (plugins, modes, feature types): {@link ExtensionsCollections}
+ * - events with `draw.on`: {@link DrawEvents}; errors: {@link DrawError}
+ *
  * Read next: [getting started](https://sakuzu.github.io/maplibre-gl-draw/getting-started),
  * then the guides for [drawing](https://sakuzu.github.io/maplibre-gl-draw/guides/drawing) and
  * [saving and loading](https://sakuzu.github.io/maplibre-gl-draw/guides/save-load). The

package/dist/view/layer/attach.d.ts

@@ -5,13 +5,19 @@ import type { CustomLayerInterface, Map as MapLibreMap } from 'maplibre-gl';
  *
  * One rule covers every timing: the slots are added whenever the style accepts layers and a slot
  * is missing. It is checked once now (for a map whose style is already parsed, even while tiles
- * are still loading) and again on every `styledata` event. maplibre fires `styledata` when a
- * style finishes loading (before `style.load` and `load`) and after changes to the style, so the
- * slots are also restored after `setStyle`, including a diffed `setStyle` that drops layers it
- * does not know. A slot that is already on the map is never added twice.
+ * are still loading) and again on every `styledata` and `style.load` event. maplibre fires
+ * `styledata` when a style finishes loading (before `style.load` and `load`) and after changes to
+ * the style, so the slots are also restored after a full `setStyle`. A slot that is already on
+ * the map is never added twice.
  *
  * The slots are added in order from the first (the backmost), which lines them up in the same
- * order in maplibre (layers added later are on top).
+ * order in maplibre (layers added later are on top). A slot missing while a later one is on the
+ * map is added just behind it.
+ *
+ * On `style.load` the slots are also put back on top of the map (see `placeSlotsOnTop`). maplibre
+ * fires it when a style is loaded and at the end of a diffed `setStyle` that changed something,
+ * and only then: a layer the host adds or moves itself fires `styledata` alone, so a layer the
+ * host put above the drawing stays there until the style is changed.
  *
  * @param map The map
  * @param getSlotLayers Returns the current list of slots (first = backmost)

package/dist/view/layer/attach.js

@@ -11,19 +11,82 @@
 function styleAcceptsLayers(map) {
     return map.style?._loaded === true;
 }
+/**
+ * Puts the slots back on top of the map after a style change
+ *
+ * The slots, and the native layers the host placed between them (the separators), form one
+ * block that belongs at the top of the map, with the slots in their order (the first is the
+ * backmost). A full `setStyle` gives that by itself: the old layers are gone and the slots are
+ * added again on top. A diffed `setStyle` does not: maplibre's `Style.serialize()` leaves custom
+ * layers out, so the diff neither removes nor adds the slots, and the layers of the new style are
+ * added above them, which hides the drawing under the basemap.
+ *
+ * Nothing is moved when the block is already in place, so the `styledata` that follows a move
+ * finds nothing to do. When it is not, the block is moved to the top: each slot, followed by the
+ * native layers that sat just above it (up to the next slot), keeps its neighbours. The layers
+ * above the frontmost slot are taken as part of the new style and stay below the block.
+ *
+ * @param map The map
+ * @param slotLayers The slots (first = backmost)
+ */
+function placeSlotsOnTop(map, slotLayers) {
+    const order = map.getLayersOrder();
+    const slotIds = slotLayers.map((layer) => layer.id).filter((id) => order.includes(id));
+    if (slotIds.length === 0)
+        return;
+    const isSlot = new Set(slotIds);
+    // The block runs from the backmost slot on the map to the frontmost one
+    let first = -1;
+    let last = -1;
+    order.forEach((id, index) => {
+        if (!isSlot.has(id))
+            return;
+        if (first < 0)
+            first = index;
+        last = index;
+    });
+    const block = order.slice(first, last + 1);
+    const slotsInBlock = block.filter((id) => isSlot.has(id));
+    const inOrder = slotsInBlock.every((id, index) => id === slotIds[index]);
+    if (inOrder && last === order.length - 1)
+        return;
+    // Each slot keeps the native layers that followed it
+    const following = new Map();
+    let current = '';
+    for (const id of block) {
+        if (isSlot.has(id)) {
+            current = id;
+            following.set(id, []);
+        }
+        else {
+            following.get(current)?.push(id);
+        }
+    }
+    for (const slotId of slotIds) {
+        map.moveLayer(slotId);
+        for (const id of following.get(slotId) ?? [])
+            map.moveLayer(id);
+    }
+}
 /**
  * Keeps the frames of the stacking order on the map for as long as the returned detach function has not
  * been called
  *
  * One rule covers every timing: the slots are added whenever the style accepts layers and a slot
  * is missing. It is checked once now (for a map whose style is already parsed, even while tiles
- * are still loading) and again on every `styledata` event. maplibre fires `styledata` when a
- * style finishes loading (before `style.load` and `load`) and after changes to the style, so the
- * slots are also restored after `setStyle`, including a diffed `setStyle` that drops layers it
- * does not know. A slot that is already on the map is never added twice.
+ * are still loading) and again on every `styledata` and `style.load` event. maplibre fires
+ * `styledata` when a style finishes loading (before `style.load` and `load`) and after changes to
+ * the style, so the slots are also restored after a full `setStyle`. A slot that is already on
+ * the map is never added twice.
  *
  * The slots are added in order from the first (the backmost), which lines them up in the same
- * order in maplibre (layers added later are on top).
+ * order in maplibre (layers added later are on top). A slot missing while a later one is on the
+ * map is added just behind it.
+ *
+ * On `style.load` the slots are also put back on top of the map (see `placeSlotsOnTop`). maplibre
+ * fires it when a style is loaded and at the end of a diffed `setStyle` that changed something,
+ * and only then: a layer the host adds or moves itself fires `styledata` alone, so a layer the
+ * host put above the drawing stays there until the style is changed.
  *
  * @param map The map
  * @param getSlotLayers Returns the current list of slots (first = backmost)
@@ -33,15 +96,28 @@ export function attachSlotLayers(map, getSlotLayers) {
     const ensureSlots = () => {
         if (!styleAcceptsLayers(map))
             return;
-        for (const slotLayer of getSlotLayers()) {
-            if (!map.getLayer(slotLayer.id)) {
+        const slotLayers = getSlotLayers();
+        slotLayers.forEach((slotLayer, index) => {
+            if (map.getLayer(slotLayer.id))
+                return;
+            // Behind the next slot that is on the map, so that the slots stay in order
+            const next = slotLayers.slice(index + 1).find((later) => map.getLayer(later.id));
+            if (next)
+                map.addLayer(slotLayer, next.id);
+            else
                 map.addLayer(slotLayer);
-            }
-        }
+        });
+    };
+    const restoreSlots = () => {
+        ensureSlots();
+        if (styleAcceptsLayers(map))
+            placeSlotsOnTop(map, getSlotLayers());
     };
     map.on('styledata', ensureSlots);
+    map.on('style.load', restoreSlots);
     ensureSlots();
     return () => {
         map.off('styledata', ensureSlots);
+        map.off('style.load', restoreSlots);
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakuzu/maplibre-gl-draw",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "WebGL2 drawing and editing engine for MapLibre GL JS: points, lines, and polygons rendered in a custom layer, with selection, hit testing, and geometry utilities.",
   "keywords": [
     "maplibre",
@@ -66,32 +66,44 @@
   "workspaces": [
     "examples",
     "playground",
-    "bench"
+    "bench",
+    "ui"
   ],
   "scripts": {
     "build": "rm -rf dist tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "check:spdx": "node scripts/spdx.mjs",
-    "lint": "biome check src examples playground bench scripts docs/.vitepress/config.mts && npm run check:layers && npm run check:terms && npm run check:spdx",
+    "lint": "biome check src examples playground bench ui scripts docs/.vitepress/config.mts docs/.vitepress/theme && npm run check:layers && npm run check:terms && npm run check:spdx && node ui/scripts/check-imports.mjs",
     "check:layers": "node scripts/check-layers.mjs",
     "check:terms": "node scripts/check-terms.mjs",
     "docs:api": "typedoc --options typedoc.site.json",
     "docs:check": "node scripts/docs-check.mjs",
     "docs:image": "node scripts/capture-readme-image.mjs",
-    "build:site": "node scripts/build-site.mjs",
+    "data:overture": "node scripts/fetch-overture-sample.mjs",
+    "site:thumbnails": "node scripts/need-ui.mjs && node scripts/capture-example-thumbnails.mjs",
+    "build:site": "npm run build && npm run ui:build && node scripts/build-site.mjs",
     "deploy:pages": "node scripts/deploy-pages.mjs",
-    "lint:fix": "biome check --write src examples playground bench",
-    "format": "biome format --write src examples playground bench",
+    "lint:fix": "biome check --write src examples playground bench ui",
+    "format": "biome format --write src examples playground bench ui",
     "test": "vitest run",
-    "test:e2e": "vitest run --config src/e2e/vitest.config.ts",
+    "test:e2e": "node scripts/need-ui.mjs && vitest run --config src/e2e/vitest.config.ts",
     "test:watch": "vitest",
-    "dev": "npm run dev -w examples",
+    "dev": "node scripts/need-ui.mjs && npm run dev -w examples",
     "dev:playground": "npm run dev -w playground",
     "dev:bench": "npm run dev -w bench",
+    "ui:build": "npm run build -w ui",
+    "ui:typecheck": "npm run typecheck -w ui",
+    "ui:test": "npm run test -w ui",
+    "ui:test:e2e": "npm run test:e2e -w ui",
+    "ui:lint": "npm run lint -w ui",
+    "ui:dev": "npm run dev -w ui",
+    "ui:check": "npm run ui:typecheck && npm run ui:test && npm run ui:test:e2e && npm run ui:build",
+    "ui:check:package": "publint ui && rm -rf ui/.pack && mkdir -p ui/.pack && npm pack -w ui --ignore-scripts --pack-destination ui/.pack >/dev/null && attw ui/.pack/*.tgz --profile esm-only --exclude-entrypoints ./style.css && rm -rf ui/.pack",
     "check:package": "publint && rm -rf .pack && mkdir -p .pack && npm pack --ignore-scripts --pack-destination .pack >/dev/null && attw .pack/*.tgz --profile esm-only && node --input-type=module -e \"await import('./dist/index.js'); await import('./dist/geometry/index.js'); await import('./dist/table/index.js'); await import('./dist/webgl/index.js'); console.log('dist imports ok')\" && rm -rf .pack",
     "prepack": "npm run build",
-    "site:dev": "npm run docs:api && vitepress dev docs",
-    "site:build": "npm run docs:api && vitepress build docs",
+    "site:dev": "node scripts/site-dev.mjs",
+    "site:dev:docs": "npm run docs:api && vitepress dev docs --port 5173 --strictPort",
+    "site:build": "node scripts/need-ui.mjs && npm run docs:api && vitepress build docs",
     "site:preview": "vitepress preview docs"
   },
   "dependencies": {