@sakuzu/maplibre-gl-draw-ui 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -7,6 +7,138 @@ follows semantic versioning.
 
 ## [Unreleased]
 
+## [1.1.0] - 2026-10-01
+
+The basemaps as the back of the stack in the layer panel, the datasets
+as rows of the stack, a limit on the features the panel lists, the
+snapping settings on the magnet, the actions of the application in a
+card, the inspector on the first tab of its options, and the layer panel
+without a pencil, in-place renaming and row counts. The word
+`activeLayer` leaves the `Messages` type (a locale that still sets it is
+ignored at runtime).
+
+### Added in 1.1.0
+
+- The datasets are rows of the layer panel, in their place in
+  the stack: those of `above-store` in front of every layer, those of
+  `layer-order` where `layers.getOrder()` places them among the layers,
+  and those of `below-store` behind every layer. A row shows the ID of
+  the dataset with a database mark, and the eye shows and hides it with
+  `setVisible`. It has no lock, and a press
+  on it leaves the selection as it is. A
+  `layer-order` dataset is dragged among the layers (`layers.reorder`
+  with its ID); the others stay. The rows follow `dataset.added`,
+  `dataset.removed`, `dataset.reordered` and the `changed` event of each
+  dataset. The option `datasets: false` (`LayerPanelOptions`) leaves
+  them out. New word: `datasets`.
+- The basemaps of the layer panel, `basemaps` (`{ id, label,
+  style, preview }`), `basemap` and `onbasemap`, in the options of
+  `createDrawUI` and of `createLayerPanel` (`LayerPanelOptions`). With
+  two or more, the basemap row opens them on the right, in the place of
+  the inspector: a list of their labels, each with its `preview` (a
+  value of CSS `background`; a neutral square without one) and a check
+  on the current one. Opening it clears the selection; a selection made
+  on the map or in the tree, its close button and Escape close it.
+  Choosing one replaces the map's style, calls `onbasemap` and leaves
+  the list open; `basemap` names the current one at the start, and
+  `ui.setBasemap(id)` and `ui.getBasemap()` change and read it. The
+  drawing is drawn again on top of the new style. The layer panel put
+  alone opens the list in the place of its sections.
+- The legend lists the style rules of the datasets as well as
+  those of the layers, in the order of the stack: a block for each
+  dataset with a rule (`Dataset.getStyleRule()` of core), titled with
+  its ID, with the rows `deriveLegend` gives and swatches shaped after
+  the types of its first rows. It follows `dataset.added`,
+  `dataset.removed`, `dataset.reordered` and the `changed` event of each
+  dataset (the reasons `style` and `rows`). The word `noLegend` now says
+  that no layer or dataset has a style rule. It needs core with
+  `Dataset.getStyleRule()`.
+- The actions of the application, rows of a card at the bottom
+  left of the map, above maplibre-gl's scale: `ui.actions` (`add`,
+  `remove`, `list`, `refresh`) and the options `actions` and
+  `actionsTitle` of `createDrawUI`. An action (`ActionSpec`) is a switch
+  (`kind: 'toggle'`), which shows what `checked` returns, or a button
+  (`kind: 'action'`), and its `shortcut` is a key of the interface,
+  listed with `?` under the title of the card. `run` is called by a
+  press and by the key; `checked` and `disabled` are read again after
+  each run and on `refresh()`, and `hint` is a caption under the row. A
+  key the interface or another action uses is refused with an error, and
+  `tools.add` refuses the key of an action. The card folds into one
+  button from its head, starts folded on a map narrower than 48rem, and
+  stands above the toolbar where it would reach it across; the layer
+  panel floating at the left ends above it. New word: `actions`.
+  `actionsOpen: false` starts the card folded.
+
+### Changed in 1.1.0
+
+- The layer panel lists up to 1,000 features in a layer, those
+  of its groups included. A layer that holds more lists none of them and
+  none of its groups: its one child is a row with their number and a
+  hint, "12,345 features. Select them on the map.", which is not
+  pressed, hidden, locked or dragged. The row of the layer works as
+  before. Each row of the panel costs about a third of a millisecond to
+  draw, so a layer of 20,000 features took seconds. `features`
+  (`LayerPanelOptions`) is now `boolean | number`: `true` (the default)
+  for the limit of 1,000, a number for another limit, `false` for no
+  features; a number less than 0 throws. New word: `manyFeatures` (with
+  `{count}`).
+- The layer panel is a stack of two sections, as in the
+  reference layout. The first, Stack (the new word `stack`), is the
+  tree with the add menu in its head; the second, Basemap, holds one
+  row with a globe mark and the name of the basemap the map shows: the
+  label of the current one of `basemaps`, else the `name` of the map's
+  style, else the word `basemap`. The panel lists the stack from the
+  front, and the basemap is its back. The row is not a node of the tree:
+  it is not dragged, hidden, locked or selected. Before the release, the
+  menu of the basemaps was a button at the top right of the map, beside
+  the theme button, and then a menu under the tree; both are gone.
+- The inspector of a feature opens on the first tab of
+  `inspector.tabs`, so `['attributes', 'style']` opens on Attributes.
+  The default stays `['style', 'attributes']`, which opens on Style. Once
+  a tab is chosen, it is kept from one feature to the next as before.
+- The magnet of the toolbar opens the snapping settings above
+  the toolbar instead of switching snapping: snapping, the kinds of
+  target under it (vertices, edges, intersections and guides, off while
+  snapping is off), snapping to datasets, tracing edges and moving shared
+  vertices together, and the key that pauses snapping. Each switch writes
+  `draw.options.update` and follows `options.changed`. The magnet stays
+  pressed while snapping is on. New words: `snapVertex`, `snapEdge`,
+  `snapIntersection`, `snapGuide`, `snapDatasets`, `traceEdges`,
+  `sharedVertexDrag` and `snapPauseKey` (with `{key}`).
+
+### Removed in 1.1.0
+
+- Renaming in place in the layer panel (F2 or a double click on
+  a row), as in the reference layout. The names of layers, groups and
+  features are changed in the head of the inspector, which also ends a
+  defect: a locked row could still be renamed in the tree.
+- The pencil that marked the active layer (the layer drawn
+  features go into) in the layer panel, as in the reference layout: the
+  row of a layer looks the same whether it is active or not. Pressing a
+  layer still makes it active (`layers.setActive`). The word
+  `activeLayer` is gone with it; at run time a locale that still gives
+  it is accepted and the word is ignored.
+
+### Fixed in 1.1.0
+
+- In the inspector of a feature, what a tab shows first is spaced
+  from the line of the tabs as the content of a panel is from its head
+  (pad-md to the first field, pad-lg to a section title). The panel of
+  the tab is now a Stack of its own under the tabs, so kata's spacing of
+  a first group applies; before, the title of the first section touched
+  the line.
+- The fields of the style have no "Style" title any more: they
+  sit straight under the Style tab, and the sections of the application
+  and Operations keep their titles. The reset of the style, which was an
+  icon button in that title, is a "Reset the style" text action after
+  the fields. In the same way, the shared fields of a selection, the
+  fields of a group and the fields of a layer have no title repeating
+  what the head says; the style rule of a layer keeps its title.
+- The page without a bundler in the README names
+  `@sakuzu/maplibre-gl-draw/geometry` in its import map, which the
+  single-file build imports. The README also shows the package from
+  React and from Vue, and a page that loads it from a CDN.
+
 ## [1.0.0] - 2026-10-01
 
 The first release of the standard user interface of

package/README.md

@@ -23,8 +23,14 @@ npm install @sakuzu/maplibre-gl-draw @sakuzu/maplibre-gl-draw-ui maplibre-gl
 
 `@sakuzu/maplibre-gl-draw` (2.x) and `maplibre-gl` are peer
 dependencies: the application installs them, and the interface uses the
-same copies as the application. Svelte is a dependency, and kata is
-compiled into the package.
+same copies as the application.
+
+The package is used from any framework or none: React, Vue, Svelte,
+another framework, or a plain page. It ships compiled JavaScript, and
+the page needs no Svelte of its own. The interface is written in
+Svelte, but Svelte is inside the package: its components are compiled
+before they are published, the Svelte runtime they use comes as a
+dependency of the package, and kata is compiled into it.
 
 The package loads in two ways.
 
@@ -33,33 +39,156 @@ The package loads in two ways.
   `@sakuzu/maplibre-gl-draw-ui/style.css` is the style sheet.
 - Without a bundler: `dist/maplibre-gl-draw-ui.js` is one module with
   Svelte and kata in it. It loads with `<script type="module">` and an
-  import map that names `@sakuzu/maplibre-gl-draw` and `maplibre-gl`,
-  together with `dist/style.css`.
+  import map that names `@sakuzu/maplibre-gl-draw`,
+  `@sakuzu/maplibre-gl-draw/geometry` and `maplibre-gl`, together with
+  `dist/style.css`.
 
-```html
-<link rel="stylesheet" href="/vendor/maplibre-gl.css" />
-<link rel="stylesheet" href="/vendor/maplibre-gl-draw-ui/style.css" />
-<script type="importmap">
-  {
-    "imports": {
-      "maplibre-gl": "/vendor/maplibre-gl.mjs",
-      "@sakuzu/maplibre-gl-draw": "/vendor/maplibre-gl-draw.js"
-    }
-  }
-</script>
-<script type="module">
-  import { Map } from 'maplibre-gl';
-  import { createDraw } from '@sakuzu/maplibre-gl-draw';
-  import { createDrawUI } from '/vendor/maplibre-gl-draw-ui/maplibre-gl-draw-ui.js';
+In every case the interface is created after the draw instance and
+destroyed before it: `createDrawUI(draw)` after `createDraw(map)`, and
+`ui.destroy()`, then `draw.destroy()`, then `map.remove()`.
+
+### From React
+
+```tsx
+import { useEffect, useRef } from 'react';
+import * as maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { createDraw } from '@sakuzu/maplibre-gl-draw';
+import { createDrawUI } from '@sakuzu/maplibre-gl-draw-ui';
+import '@sakuzu/maplibre-gl-draw-ui/style.css';
+
+const style = 'https://tiles.openfreemap.org/styles/liberty';
+
+export function DrawMap() {
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!container.current) return;
+    const map = new maplibregl.Map({ container: container.current, style });
+    const draw = createDraw(map);
+    const ui = createDrawUI(draw);
+    return () => {
+      ui.destroy();
+      draw.destroy();
+      map.remove();
+    };
+  }, []);
+
+  return <div ref={container} style={{ height: 400 }} />;
+}
+```
+
+The interface lies over the map's container, so the component renders
+the container alone. In development, Strict Mode runs the effect twice;
+the cleanup destroys the first set, so this is safe.
+
+### From Vue
 
-  const map = new Map({ container: 'map', style: '/style.json' });
-  createDrawUI(createDraw(map));
+```vue
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import * as maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { createDraw, type Draw } from '@sakuzu/maplibre-gl-draw';
+import { createDrawUI, type DrawUI } from '@sakuzu/maplibre-gl-draw-ui';
+import '@sakuzu/maplibre-gl-draw-ui/style.css';
+
+const style = 'https://tiles.openfreemap.org/styles/liberty';
+const container = ref<HTMLDivElement>();
+let map: maplibregl.Map | undefined;
+let draw: Draw | undefined;
+let ui: DrawUI | undefined;
+
+onMounted(() => {
+  map = new maplibregl.Map({ container: container.value!, style });
+  draw = createDraw(map);
+  ui = createDrawUI(draw);
+});
+
+onBeforeUnmount(() => {
+  ui?.destroy();
+  draw?.destroy();
+  map?.remove();
+});
 </script>
+
+<template>
+  <div ref="container" style="height: 400px"></div>
+</template>
 ```
 
-The paths stand for where the page serves the files: maplibre-gl's
-`dist/maplibre-gl.mjs`, the `dist/` of this package, and a module of core
-with its own dependencies in it that imports `maplibre-gl` by that name.
+`map`, `draw` and `ui` are plain variables, not `ref`s, which would wrap
+them in proxies. The guide to
+[using core with a framework](https://sakuzu.github.io/maplibre-gl-draw/guides/frameworks.html)
+shows the same patterns for Svelte, and how to keep the map out of
+server-side rendering. Under some bundlers, maplibre-gl 6 needs its
+worker URL set once per page, as the
+[README of core](https://github.com/sakuzu/maplibre-gl-draw#usage) shows
+for Vite.
+
+### Without a bundler
+
+A plain HTML page loads every module from a CDN through an import map.
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Draw</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.11.1/dist/maplibre-gl.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sakuzu/maplibre-gl-draw-ui@1/dist/style.css">
+    <script type="importmap">
+      {
+        "imports": {
+          "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@6.11.1/dist/maplibre-gl.mjs",
+          "@sakuzu/maplibre-gl-draw": "https://esm.sh/@sakuzu/maplibre-gl-draw@2?external=maplibre-gl",
+          "@sakuzu/maplibre-gl-draw/geometry": "https://esm.sh/@sakuzu/maplibre-gl-draw@2/geometry",
+          "@sakuzu/maplibre-gl-draw-ui": "https://cdn.jsdelivr.net/npm/@sakuzu/maplibre-gl-draw-ui@1/dist/maplibre-gl-draw-ui.js"
+        }
+      }
+    </script>
+    <style>
+      html, body, #map { height: 100%; margin: 0; }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script type="module">
+      import * as maplibregl from 'maplibre-gl';
+      import { createDraw } from '@sakuzu/maplibre-gl-draw';
+      import { createDrawUI } from '@sakuzu/maplibre-gl-draw-ui';
+
+      const map = new maplibregl.Map({
+        container: 'map',
+        style: 'https://tiles.openfreemap.org/styles/liberty',
+        center: [139.767, 35.681],
+        zoom: 14,
+      });
+      createDrawUI(createDraw(map));
+    </script>
+  </body>
+</html>
+```
+
+The import map names four modules.
+
+- `maplibre-gl` is maplibre-gl's own ES module build, at a version that
+  the peer of core accepts (`~6.11.1`). It starts its worker from the
+  same address by itself.
+- `@sakuzu/maplibre-gl-draw` comes from esm.sh, which puts core's own
+  dependencies in it. `?external=maplibre-gl` leaves maplibre-gl to the
+  import map, so the page and the library share one copy.
+- `@sakuzu/maplibre-gl-draw/geometry` is imported by the interface for
+  its measurements.
+- `@sakuzu/maplibre-gl-draw-ui` is the single-file build of this
+  package, with Svelte and kata in it.
+
+The same page works with files served by the application: put the
+addresses of its own copies (maplibre-gl's `dist/maplibre-gl.mjs`, this
+package's `dist/`, and a build of core with its dependencies in it that
+imports `maplibre-gl` by that name) in the import map and the two
+`<link>` elements. Pin exact versions in production.
 
 ## Use
 
@@ -85,8 +214,8 @@ The options of `createDrawUI`, all optional:
 | --- | --- | --- |
 | `container` | The positioned element it lies over | the map's container |
 | `toolbar` | `false`, or the `tools`, `delete` and `snapping` | `true` |
-| `inspector` | `false`, or the `tabs` and `operations` | `true` |
-| `layers` | `false`, or the `features`, `add` and `reorder` | `true` |
+| `inspector` | `false`, or `tabs` (the first opens) and `operations` | `true` |
+| `layers` | `false`, or `features`, `datasets`, `add`, `reorder` | `true` |
 | `legend` | The legend beside the layer panel | `true` |
 | `locale` | `en`, `ja`, or words laid over English | `en` |
 | `theme` | `light`, `dark` or `auto` (follows the system) | `auto` |
@@ -96,6 +225,12 @@ The options of `createDrawUI`, all optional:
 | `side` | The side panels `floating` over the map or `beside` it | `floating` |
 | `themeToggle` | The button that switches the look | `true` |
 | `mapControls` | maplibre-gl's globe, compass, zoom and scale | `true` |
+| `basemaps` | The basemaps the basemap row opens | none |
+| `basemap` | The ID of the basemap current at the start | the map's |
+| `onbasemap` | Called with the basemap after it changed | none |
+| `actions` | The actions of the application, in a card at the left | none |
+| `actionsTitle` | The title of the card of the actions | `Actions` |
+| `actionsOpen` | Whether the card of the actions starts unfolded | `true` |
 
 Each part also goes alone into an element of the page, with its own
 options and `target`, `locale` and `theme`: `createToolbar`,
@@ -103,6 +238,13 @@ options and `target`, `locale` and `theme`: `createToolbar`,
 
 The interface is laid over the map's container. The toolbar alone goes
 into any positioned element with `createToolbar(draw, { target })`.
+The magnet at the end of the toolbar is pressed while snapping is on,
+and opens the snapping settings above the toolbar: snapping itself and,
+under it, the kinds of target (vertices, edges, intersections and
+guides), then snapping to datasets, tracing edges and moving shared
+vertices together, with the key that pauses snapping while it is held.
+Each switch writes `draw.options.update`, and the settings follow
+`options.changed`, so a change made by code shows too.
 The side panels float over the map, gap-md from its edges and as tall
 as their content; `side: 'beside'` docks them beside the map on a wide
 one instead. The map's padding follows the interface, the width of a
@@ -111,18 +253,36 @@ so that `fitBounds` and `easeTo` keep clear of them; `padding: false`
 leaves the map's padding alone.
 
 On the left, the layer panel and the legend share a panel, in two tabs.
-The layer panel is the tree of the layers, their groups and their
-features, from the front, with the eye, the lock, renaming in place (F2
-or a double click), reordering by dragging and an add menu (a new layer,
+The layer panel has two sections, Stack and Basemap. Stack is the tree
+of the layers, their groups and their features, from the front, with
+the eye, the lock, reordering by dragging and an add menu (a new layer,
 a new group from the selected features). A feature is named by its
-`properties.name`, or by its type when it has none. The legend shows
-the rows of the style rule (`styleRule`) of each layer that has one.
+`properties.name`, or by its type when it has none; names are changed
+in the head of the inspector, not in the tree. Each row costs its
+drawing, so a layer lists up to 1,000 features, those of its groups
+included: a layer that holds more lists none of them and shows their
+number instead, with a hint to select them on the map, and its own row
+works as before (the eye, the lock, the active layer). `features` sets
+the limit as a number, and `false` lists no features, only the groups.
+The datasets (`draw.datasets`) are rows of the stack too, in their place
+among the layers: those of `above-store` in front of every layer, those
+of `layer-order` where `layers.getOrder()` places them, and those of
+`below-store` behind every layer. A dataset row shows its ID (core gives
+a dataset no name), with the eye (`setVisible`) and no lock; a press on
+it leaves the selection as it is, and it is dragged among the layers
+only when its order is
+`layer-order`. Basemap, under it, is the back of the stack (see
+[Basemaps](#basemaps)). The legend shows the rows of the style rule
+(`styleRule`) of each layer and of each dataset that has one, in the
+order of the stack.
 Shift+L opens and closes the panel, and while it is closed a button at
 the top left of the map opens it again.
 
 ```ts
 const ui = createDrawUI(draw, {
-  layers: { features: true, add: true, reorder: true }, // or false for none
+  // or false for none; features: true lists up to 1,000 in a layer, a number
+  // sets that limit, and false lists none
+  layers: { features: true, datasets: true, add: true, reorder: true },
   legend: true,
 });
 ```
@@ -163,6 +323,9 @@ const ui = createDrawUI(draw, {
 });
 ```
 
+The tabs open on the first of `tabs`: `['attributes', 'style']` opens
+on Attributes. A tab chosen stays open from one feature to the next.
+
 A value typed into an attribute is kept as the string typed. The
 inspector alone goes into any element with
 `createInspector(draw, { target })`, and an application adds a section
@@ -209,8 +372,102 @@ open over the map or beside it, the button stands to the left of it.
 
 Beyond the look, the options above choose the parts and what each shows,
 `ui.tools.add` adds a tool for a mode of the application (see
-[Use](#use)), and `ui.inspector.sections.add` adds a section to the
-inspector (see [Inspector](#inspector)).
+[Use](#use)), `ui.inspector.sections.add` adds a section to the
+inspector (see [Inspector](#inspector)), and `ui.actions.add` adds an
+action of the application (see [Actions](#actions)).
+
+### Actions
+
+An action of the application, such as saving the drawing or turning a
+setting on and off, is a row of a card at the bottom left of the map,
+above maplibre-gl's scale: a switch (`kind: 'toggle'`) or a button
+(`kind: 'action'`), with its key at the end. A press on the row and its
+key both call `run`; a switch shows what `checked` returns, read again
+after each run and on `ui.actions.refresh()`, so the state stays with
+the application. `disabled` dims the row and turns its key off, and
+`hint` is a caption under it. The keys are listed with `?` under the
+title of the card, and do nothing while a field has the focus. A key the
+interface uses (the keys of the tools, Delete, Backspace, Escape, `?`
+and Shift+L) or another action uses is refused with an error. The card
+shows while there is an action, its head folds it into one button, and
+on a map narrower than 48rem it starts folded; where it would reach the
+toolbar across, it stands above the toolbar, and the layer panel
+floating at the left ends above it. Its title is `actionsTitle`, or the
+word for actions of the locale.
+
+```ts
+const ui = createDrawUI(draw, {
+  actions: [
+    {
+      id: 'read-only',
+      label: 'Read-only',
+      kind: 'toggle',
+      shortcut: 'R',
+      run: () => draw.setReadOnly(!draw.isReadOnly()),
+      checked: () => draw.isReadOnly(),
+    },
+  ],
+});
+
+const remove = ui.actions.add({
+  id: 'save',
+  label: 'Save',
+  kind: 'action',
+  shortcut: 'S',
+  run: () => localStorage.setItem('drawing', JSON.stringify(draw.document.toJSON())),
+});
+```
+
+## Basemaps
+
+The last section of the layer panel, Basemap, is the back of the stack:
+one row under the tree of the layers, apart from it as the basemap is no
+layer, so it is not dragged, hidden, locked or selected. The row shows
+the name of the basemap the map shows: the label of the current one of
+`basemaps`, else the `name` of the map's style, read again on each
+`style.load`, else the word for a basemap.
+
+With two or more `basemaps`, pressing the row opens them on the right,
+in the place of the inspector: a list of their labels, each with its
+`preview` (a value of CSS `background`, such as a gradient in the colors
+of the style; a neutral square without one), and a check on the current
+one. Opening it clears the selection, and selecting a feature on the map
+or in the tree closes it, as do its close button and Escape. Choosing a
+basemap replaces the map's style with its `style` (a URL or a style
+object) and calls `onbasemap`, and the list stays open.
+`ui.setBasemap(id)` does the same, and `ui.getBasemap()` returns the
+current one. The current one at the start is `basemap`, or else the
+first whose `style` is the URL the map's style was loaded from. With
+fewer, the row only shows the name.
+
+```ts
+const styles = 'https://tiles.openfreemap.org/styles';
+const ui = createDrawUI(draw, {
+  basemaps: [
+    {
+      id: 'bright',
+      label: 'Bright',
+      style: `${styles}/bright`,
+      preview: 'linear-gradient(135deg, #f4f1ea, #dfe7d5)',
+    },
+    { id: 'dark', label: 'Dark', style: `${styles}/dark` },
+  ],
+  onbasemap: (basemap) => console.log(basemap.id),
+});
+```
+
+The layer panel put alone takes the same options
+(`LayerPanelOptions`):
+`createLayerPanel(draw, { target, basemaps, basemap, onbasemap })`.
+There, the row opens the list in the place of the panel's sections,
+until its close button or Escape closes it.
+
+The drawing stays: choosing a basemap calls
+`map.setStyle(style, { diff: false })`, which replaces the style whole,
+and the draw instance adds its layers again on top of the new style once
+it has loaded. Sources, layers and the terrain that the application
+added to the map itself go with the old style, so it adds them again on
+the map's `style.load` event.
 
 ## Map controls
 

package/dist/actions.d.ts

@@ -0,0 +1,46 @@
+import type { Shortcut } from '@sakuzu/kata/svelte';
+import type { Messages } from './messages.js';
+import { Box } from './store.js';
+import type { ActionSpec, ActionsHandle, ToolEntry } from './types.js';
+/**
+ * A key written one way: the modifiers in a fixed order, then the key, all in lowercase, so that
+ * `Shift+R`, `shift+r` and `r+shift` compare equal
+ */
+export declare function normalizeKey(shortcut: string): string;
+/**
+ * Checks an action of the application
+ *
+ * @throws Error when a field is missing or has the wrong type
+ */
+export declare function checkAction(spec: ActionSpec): void;
+/**
+ * Checks that the key of an action is free
+ *
+ * @throws Error when it is a key of the interface, of a tool or of another action
+ */
+export declare function checkActionKey(spec: ActionSpec, tools: readonly ToolEntry[], messages: Messages, actions: readonly ActionSpec[]): void;
+/** The actions of the card, and the count of their changes that the rows follow */
+export interface ActionsState {
+    /** The actions in the order of the card */
+    readonly list: Box<ActionSpec[]>;
+    /** Changed after each run and on `refresh()`, so that the rows read `checked` and `disabled` */
+    readonly version: Box<number>;
+}
+/**
+ * The actions of the options, checked
+ *
+ * @throws Error when an action is not valid, two share an ID, or a key is taken
+ */
+export declare function actionsState(actions: readonly ActionSpec[] | undefined, tools: readonly ToolEntry[], messages: Messages): ActionsState;
+/** Runs an action, unless it is disabled, and has the rows read their state again */
+export declare function runAction(state: ActionsState, spec: ActionSpec): void;
+/** The actions of the card, to add to and to remove from */
+export declare function actionsHandle(state: ActionsState, tools: Box<ToolEntry[]>, messages: Box<Messages>): ActionsHandle;
+/** The keys of the actions, as shortcuts of kata's Shell under the title of the card */
+export declare function actionShortcuts(state: ActionsState, group: string): Shortcut[];
+/**
+ * Checks that the key of a tool is not the key of an action
+ *
+ * @throws Error when an action has the key
+ */
+export declare function checkToolKey(id: string, shortcut: string | undefined, actions: readonly ActionSpec[]): void;

package/dist/basemaps.d.ts

@@ -0,0 +1,58 @@
+import { Box } from './store.js';
+import type { Basemap } from './types.js';
+/** The members of the map the basemaps use */
+export interface BasemapMap {
+    setStyle(style: Basemap['style'], options?: {
+        diff?: boolean;
+    }): unknown;
+    /** The URL the style was loaded from (maplibre-gl 6), to find the current basemap */
+    getStyleUrl?(): string | null;
+    /** The style as it is now, whose name names a basemap that is none of the list */
+    getStyle?(): {
+        name?: string;
+    } | undefined;
+    /** Follows the load of each new style, to read its name again */
+    on?(type: 'style.load', listener: () => void): unknown;
+    off?(type: 'style.load', listener: () => void): unknown;
+}
+/** The basemaps of the options, checked, and the ID of the current one */
+export interface BasemapSettings {
+    list: readonly Basemap[];
+    current: string | null;
+}
+/**
+ * Checks the basemaps of the options and finds the current one: `initial` when given, else the
+ * first whose style is the URL of the map's style, else none.
+ *
+ * @throws Error when a basemap has no ID, no label or no style, has a preview that is not a
+ *   string, two share an ID, or `initial` is the ID of none of them
+ */
+export declare function basemapSettings(basemaps: readonly Basemap[] | undefined, initial: string | undefined, styleUrl: string | null): BasemapSettings;
+/** The basemaps on a map: the list, the current one, its name, and the change */
+export interface BasemapControl {
+    /** The basemaps, in the order they are offered */
+    readonly list: readonly Basemap[];
+    /** The ID of the current basemap, which the row and the basemaps to choose from follow */
+    readonly current: Box<string | null>;
+    /**
+     * The name of the basemap the map shows: the label of the current basemap, else the `name` of
+     * the map's style, else null. Read inside a component, it is followed
+     */
+    name(): string | null;
+    /**
+     * Replaces the map's style with the style of a basemap and calls `onchange` with it; nothing
+     * happens when it is current already
+     *
+     * @throws Error when no basemap has this ID
+     */
+    set(id: string): void;
+    /** The current basemap, or null */
+    get(): Basemap | null;
+    /** Stops following the map's style */
+    destroy(): void;
+}
+/**
+ * Keeps the current basemap of a map and changes its style. The name of the map's style is read
+ * now and again on each `style.load`
+ */
+export declare function basemapControl(map: BasemapMap, settings: BasemapSettings, onchange?: (basemap: Basemap) => void): BasemapControl;