use observablehq:stdlib instead of npm:@observablehq/stdlib (#1670)

* observablehq:stdlib

* observablehq:stdlib/{xlsx,zip}

* document observablehq:

Author: mbostock

docs/chart.js

@@ -1,5 +1,5 @@
-import {FileAttachment} from "npm:@observablehq/stdlib";
 import * as Plot from "npm:@observablehq/plot";
+import {FileAttachment} from "observablehq:stdlib";
 
 export async function Chart() {
   const gistemp = await FileAttachment("./lib/gistemp.csv").csv({typed: true});

docs/embeds.md

@@ -7,8 +7,8 @@ Embedded modules are vanilla JavaScript, and behave identically when embedded in
 Embedded modules are often written as component functions that return DOM elements. These functions can take options (or “props”), and typically load their own data. For example, below is a simple `chart.js` module that exports a `Chart` function that renders a scatterplot of global surface temperature data.
 
 ```js run=false
-import {FileAttachment} from "npm:@observablehq/stdlib";
 import * as Plot from "npm:@observablehq/plot";
+import {FileAttachment} from "observablehq:stdlib";
 
 export async function Chart() {
   const gistemp = await FileAttachment("./lib/gistemp.csv").csv({typed: true});

docs/files.md

@@ -7,7 +7,7 @@ keywords: file, fileattachment, attachment
 Load files — whether static or generated dynamically by a [data loader](./data-loaders) — using the built-in `FileAttachment` function. This is available by default in Markdown, but you can import it explicitly like so:
 
 ```js echo
-import {FileAttachment} from "npm:@observablehq/stdlib";
+import {FileAttachment} from "observablehq:stdlib";
 ```
 
 The `FileAttachment` function takes a path and returns a file handle. This handle exposes:

docs/imports.md

@@ -25,7 +25,6 @@ Imported symbols can be referenced in any code block or inline expression — no
 Inputs.button("Throw confetti! 🎉", {reduce: () => confetti()})
 ```
 
-
 <div class="tip">While imports can live in code blocks anywhere on the page, by convention imports are placed at the top of pages for readability.</div>
 
 Framework provides a variety of ways to import. When you reference `d3`, `Inputs`, `Plot` or some other built-in, you’re [implicitly importing](#implicit-imports) from npm. In addition, you can import modules explicitly from:
@@ -130,7 +129,7 @@ import {foo} from "./foo.js";
 Within a local module, you can import other local modules, as well as `npm:`, Node, and remote imports. You can also reference local files within a local module by importing [`FileAttachment`](./files) from the Observable standard library like so:
 
 ```js run=false
-import {FileAttachment} from "npm:@observablehq/stdlib";
+import {FileAttachment} from "observablehq:stdlib";
 
 export const sales = await FileAttachment("sales.csv").csv({typed: true});
 ```
@@ -206,15 +205,23 @@ Module preloading does not apply to [dynamic imports](#dynamic-imports) and [`im
 <link rel="modulepreload" href="npm:d3-array">
 ```
 
+## Observable imports
+
+Framework includes a few built-in libraries implemented by Framework itself that can be imported via the `observablehq:` protocol. This currently includes:
+
+* `observablehq:runtime` - the [Observable Runtime](https://github.com/observablehq/runtime)
+* `observablehq:stdlib` - [Framework’s standard library](https://github.com/observablehq/framework/blob/main/src/client/stdlib.js)
+
 ## Implicit imports
 
 For convenience, Framework provides recommended libraries by default in Markdown. These implicit imports are only evaluated if you reference the corresponding symbol and hence don’t add overhead if you don’t use them; for example, D3 won’t be loaded unless you reference `d3`.
 
 Click on any of the imported symbols below to learn more.
 
-<pre><code class="language-js">import {<a href="./files">FileAttachment</a>} from "npm:@observablehq/stdlib";</code></pre>
-<pre><code class="language-js">import {<a href="./reactivity#generators">Generators</a>} from "npm:@observablehq/stdlib";</code></pre>
-<pre><code class="language-js">import {<a href="./reactivity#mutables">Mutable</a>} from "npm:@observablehq/stdlib";</code></pre>
+<pre><code class="language-js">import {<a href="./files">FileAttachment</a>} from "observablehq:stdlib";</code></pre>
+<pre><code class="language-js">import {<a href="./reactivity#generators">Generators</a>} from "observablehq:stdlib";</code></pre>
+<pre><code class="language-js">import {<a href="./reactivity#mutables">Mutable</a>} from "observablehq:stdlib";</code></pre>
+<pre><code class="language-js">import {<a href="./javascript#resize-render">resize</a>} from "observablehq:stdlib";</code></pre>
 <pre><code class="language-js">import <a href="./lib/dot">dot</a> from "npm:@observablehq/dot";</code></pre>
 <pre><code class="language-js">import * as <a href="./lib/duckdb">duckdb</a> from "npm:@duckdb/duckdb-wasm";</code></pre>
 <pre><code class="language-js">import {<a href="./lib/duckdb">DuckDBClient</a>} from "npm:@observablehq/duckdb";</code></pre>
@@ -235,8 +242,12 @@ Click on any of the imported symbols below to learn more.
 <pre><code class="language-js">import {<a href="./lib/htl">svg</a>} from "npm:htl";</code></pre>
 <pre><code class="language-js">import * as <a href="./lib/leaflet">L</a> from "npm:leaflet";</code></pre>
 <pre><code class="language-js">import <a href="../lib/lodash">_</a> from "npm:lodash";</code></pre>
+<pre><code class="language-js">import * as <a href="./jsx">React</a> from "npm:react";</code></pre>
+<pre><code class="language-js">import * as <a href="./jsx">ReactDOM</a> from "npm:react-dom";</code></pre>
 <pre><code class="language-js">import * as <a href="../lib/topojson">topojson</a> from "npm:topojson-client";</code></pre>
 
+In addition to the above, several implicit imports have slightly more involved definitions: [`now`](./lib/generators#now), [`width`](./lib/generators#width-element), [`dark`](./lib/generators#dark), [`vg`](./lib/mosaic), and [`vl`](./lib/vega-lite).
+
 ## Require
 
 If you’re familiar with Observable notebooks, you may be familiar with `require`. We recommend that you avoid `require` as the underlying Asynchronous Module Definition (AMD) convention has been made obsolete by standard imports in JavaScript, and AMD tends to be implemented inconsistently.

docs/lib/generators.md

@@ -7,7 +7,7 @@ keywords: [dark, width]
 The Observable standard library includes several generator utilities. These are available by default in Markdown as `Generators`, but you can import them explicitly:
 
 ```js echo
-import {Generators} from "npm:@observablehq/stdlib";
+import {Generators} from "observablehq:stdlib";
 ```
 
 ## input(*element*)
@@ -85,6 +85,10 @@ width
 
 [Source](https://github.com/observablehq/framework/blob/main/src/client/stdlib/generators/dark.ts) · Returns an async generator that yields a boolean indicating whether the page is currently displayed with a dark [color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme).
 
+```js run=false
+const dark = Generators.dark();
+```
+
 If the page supports both light and dark mode (as with the [default theme](../themes)), the value reflects the user’s [preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). The generator will yield a new value if the preferred color changes — as when the user changes their system settings, or if the user’s system adapts automatically to the diurnal cycle — allowing you to update the display as needed without requiring a page reload.
 
 If the page only supports light mode, the value is always false; likewise it is always true if the page only has a dark theme.

docs/lib/mosaic.md

@@ -15,6 +15,18 @@ ${histogram}
 
 The views above are coordinated: brushing a time window in the histogram, or a region in either map, will filter both maps. _What spatial patterns can you find?_
 
+Mosaic vgplot is available by default in Markdown as `vg` and is backed by the default DuckDB client that is configured using [SQL front matter](../sql). If you would prefer to initialize Mosaic yourself, you can do something like:
+
+```js run=false
+import {DuckDBClient} from "npm:@observablehq/duckdb";
+import * as vgplot from "npm:@uwdata/vgplot";
+
+const db = await DuckDBClient.of({trips: FileAttachment("nyc-taxi.parquet")});
+const coordinator = new vgplot.Coordinator();
+coordinator.databaseConnector(vgplot.wasmConnector({duckdb: db._db}));
+const vg = vgplot.createAPIContext({coordinator});
+```
+
 The code below creates three views, coordinated by Mosaic’s [crossfilter](https://uwdata.github.io/mosaic/api/core/selection.html#selection-crossfilter) helper.
 
 ```js echo

docs/reactivity.md

@@ -326,7 +326,7 @@ Normally, only the code block that declares a top-level variable can define it o
 `Mutable` is available by default in Markdown but you can import it explicitly like so:
 
 ```js echo
-import {Mutable} from "npm:@observablehq/stdlib";
+import {Mutable} from "observablehq:stdlib";
 ```
 
 Then to use it:

src/client/preview.js

@@ -1,4 +1,4 @@
-import {FileAttachment, registerFile} from "npm:@observablehq/stdlib";
+import {FileAttachment, registerFile} from "observablehq:stdlib";
 import {main, runtime, undefine} from "./main.js";
 import {findLoading, findRoots, registerRoot} from "./main.js";
 import {enableCopyButtons} from "./pre.js";

src/client/stdlib/inputs.js

@@ -1,5 +1,5 @@
 import {file as _file} from "@observablehq/inputs";
-import {AbstractFile} from "npm:@observablehq/stdlib";
+import {AbstractFile} from "observablehq:stdlib";
 
 export {
   button,

src/client/stdlib/zip.js

@@ -1,5 +1,5 @@
-import {AbstractFile} from "npm:@observablehq/stdlib";
 import JSZip from "npm:jszip";
+import {AbstractFile} from "observablehq:stdlib";
 
 export class ZipArchive {
   constructor(archive) {