craft-library 0.5.0 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # Sara Lobo Library
 
-Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank, two "thinking" indicators, the Magic sphere and the Sweep, and the Panorama, a hero for moving pictures. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for two of the 3D pieces, and it loads only when one of them is on the page.
+Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank, two "thinking" indicators, the Magic sphere and the Sweep, the Panorama, a hero for moving pictures, the Map pin, an address picker, and the Token wheel, an onboarding screen. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for five of the 3D pieces, and it loads only when one of them is on the page.
 
 ```bash
 npm install craft-library
@@ -101,6 +101,54 @@ import { PiggyBank } from 'craft-library';
 
 It is WebGL (three.js 0.169, which comes with the package and loads the first time it mounts), so one per screen is best. It is made for a dark background; black is best.
 
+## Map pin
+
+A 3D address picker: a hollow frosted-glass map pin over a dark city map in perspective. A click or a tap on a street sends the pin flying on springs to the nearest curb: it lifts, its head leans with the acceleration, it rises a touch to aim, falls under gravity and sticks its tip in, the glass vibrating about it. The map is sharp where it lands and soft further away, the streets carry their names, and a card along the bottom shows the address, with the number on the right side of the street, to confirm. With a mouse, hovering shows the address a click would give. The city and its names are invented, to show the gesture.
+
+```jsx
+import { MapPin } from 'craft-library';
+
+<MapPin height={560} onConfirm={(a) => saveAddress(a)} />   // saveAddress: your own handler
+```
+
+| Prop | | |
+|---|---|---|
+| `height` | `number \| string` | The box it fills: 100% wide and this tall. Default `560`. |
+| `onChange` | `(address) => void` | Each address the pin is sent to: `{ address, neighbourhood, place }`. |
+| `onConfirm` | `(address) => void` | When Confirm is pressed, with the same address. |
+| `labels` | `{ title, confirm, confirmed }` | The card's words. Defaults `"Delivery address"`, `"Confirm"`, `"Confirmed"`. |
+| `replay` | `any` | Change it (a counter, say) to fly the pin off and back in. |
+| `autoplay` | `boolean` | `false` keeps the pin out until `replay` changes. Default `true`. |
+| `fonts` | `boolean` | `false` doesn't load DM Sans from Google Fonts. Default `true`. |
+| `label` | `string` | The map's accessible name. |
+
+It is WebGL (three.js 0.169, which comes with the package and loads the first time it mounts), so one per screen is best. It paints its own dark ground.
+
+## Token wheel
+
+An account onboarding screen in 3D: eight silver tokens (Pix, card, Bitcoin, insurance, investments, exchange, cashback, boleto) turn slowly on a wheel, and the one at the top comes forward and makes a full turn to show what it is. Turn the phone on its side and the tokens let go: they fall, roll and pile up against the edge of the screen with rigid-body physics, a metal bounce and a wobble at every knock; stand it up and, once they rest, they float back into the wheel. The screen sits in a phone that scales to fit the box at every angle, with two round buttons beside it: turn the phone, replay.
+
+```jsx
+import { TokenWheel } from 'craft-library';
+
+<TokenWheel height={900} onContinue={() => goToNextStep()} />   // goToNextStep: your own handler
+```
+
+| Prop | | |
+|---|---|---|
+| `height` | `number \| string` | The box it fills: 100% wide and this tall. Default `900`. |
+| `labels` | `{ eyebrow, title, cta, initials }` | The screen's words. Defaults `"Account · BRL"`, `"One account for everything"`, `"Continue"`, `"SL"`. |
+| `onContinue` | `() => void` | When the white pill is pressed. |
+| `turned` | `boolean` | `true` lays the phone on its side, `false` stands it up. |
+| `frame` | `boolean` | `false` fills the box with the screen itself, for a real phone (give it `100svh`): the phone's own tilt then moves the tokens (on iOS, after a tap on the wheel). Default `true`. |
+| `controls` | `boolean` | `false` hides the two round buttons. Default `true`. |
+| `replay` | `any` | Change it (a counter, say) to play the opening again. |
+| `autoplay` | `boolean` | `false` keeps the tokens out until `replay` changes. Default `true`. |
+| `gyroscope` | `boolean` | `false` never reads the phone's tilt. Default `true`. |
+| `fonts` | `boolean` | `false` doesn't load DM Sans from Google Fonts. Default `true`. |
+
+It is WebGL (three.js 0.169, which comes with the package and loads the first time it mounts), so one per screen is best. The screen is true black; put it on a dark page.
+
 ## Magic sphere and Sweep
 
 Two "thinking" indicators for the wait while an answer is being written: a ball of dots, drawn on a canvas, with the word beside it. The **Magic sphere** is a Rubik's cube on a ball, one grey tone per face: its slices turn and scramble the pieces, retrace their steps until every piece is home, and the ball lights up for a moment while a light passes through the word. In the **Sweep**, a wave crosses a dotted globe from left to right, lifting the dots it passes, runs on through the word at the same speed, and rests.
@@ -145,7 +193,7 @@ It is WebGL with no dependencies, so one per screen is best. Your clip and pictu
 
 ## Plain HTML
 
-One script registers eight tags. Same pieces, same props as attributes.
+One script registers ten tags. Same pieces, same props as attributes.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
@@ -158,12 +206,14 @@ One script registers eight tags. Same pieces, same props as attributes.
 <magic-sphere></magic-sphere>             <!-- label="Thinking" (default; label="" for the ball alone), size="32" -->
 <sweep-sphere></sweep-sphere>
 <panorama-reel heading="Lorem ipsum"></panorama-reel>  <!-- text, text-italic; video and stills as JSON; el.replay(); 100% wide, 640px tall unless you size it -->
+<map-pin></map-pin>                       <!-- "pinchange" and "pinconfirm" events: e.detail { address, neighbourhood, place }; label-title, label-confirm, label-confirmed; el.replay(); 100% wide, 560px tall unless you size it -->
+<token-wheel></token-wheel>               <!-- "tokenscontinue" event; label-eyebrow, label-title, label-cta, initials; frame="false", controls="false", turned; el.turn(true|false), el.replay(); 100% wide, 900px tall unless you size it -->
 ```
 
 With a bundler and no React: `import 'craft-library/elements'`.
 
 ## Motion and access
 
-Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over; the piggy bank is a labelled image. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still, the card swaps faces with a fade, with no entrance and no breathing, the piggy bank stays in place while the coins appear inside it and its eyes close, the thinking balls hold still and only breathe, and the panorama skips its opening and starts settled. The panorama's title is a heading; its screens and cursor are decorative.
+Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over; the piggy bank and the map pin's map are labelled images; the pin's address is announced as it changes and Confirm is a real button. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still, the card swaps faces with a fade, with no entrance and no breathing, the piggy bank stays in place while the coins appear inside it and its eyes close, the thinking balls hold still and only breathe, the panorama skips its opening and starts settled, the map pin appears in place without its flight, and the token wheel starts formed and still. The token wheel's wheel is a `role="button"` that Enter and Space replay, its title is a heading and its round buttons are real buttons with names. The panorama's title is a heading; its screens and cursor are decorative.
 
 MIT · [Sara Lobo Library](https://saralobolibrary.com)

package/dist/cdn.js

@@ -1,4 +1,4 @@
-// the one-file build for a <script> tag: registers the eight tags and exposes the mount functions (the 3D pieces' scenes
+// the one-file build for a <script> tag: registers the ten tags and exposes the mount functions (the 3D pieces' scenes
 // are fetched from next to this file the first time one is mounted, and so are the Panorama's clip and pictures)
-import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel };
+import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Sara Lobo Library · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep, panorama · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel> */
+/* Sara Lobo Library · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep, panorama, map pin, token wheel · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel>, <map-pin>, <token-wheel> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -2010,10 +2010,10 @@ void main() {
     for (let i = 0; i < MAX; i++) idx.set([i * 4, i * 4 + 1, i * 4 + 2, i * 4, i * 4 + 2, i * 4 + 3], i * 6);
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW);
-    [["aPos", 3, 0], ["aUv", 2, 3], ["aRect", 4, 5], ["aMisc", 4, 9], ["aPan", 2, 13], ["aLab", 2, 15], ["aGlow", 1, 17]].forEach(([name, size, off]) => {
+    [["aPos", 3, 0], ["aUv", 2, 3], ["aRect", 4, 5], ["aMisc", 4, 9], ["aPan", 2, 13], ["aLab", 2, 15], ["aGlow", 1, 17]].forEach(([name, size, off2]) => {
       const loc = gl.getAttribLocation(prog, name);
       gl.enableVertexAttribArray(loc);
-      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, F * 4, off * 4);
+      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, F * 4, off2 * 4);
     });
     const U = (n2) => gl.getUniformLocation(prog, n2);
     const uHalf = U("uHalf"), uP = U("uP"), uLab = U("uLab"), uView = U("uView"), uDpr = U("uDpr"), uColor = U("uColor");
@@ -2469,6 +2469,101 @@ void main() {
     return mountPanorama(host, opts);
   }
 
+  // src/pin-load-cdn.js
+  var me4 = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base3 = me4 ? me4.slice(0, me4.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadPin = () => import(base3 + "pin.cdn.js");
+
+  // dist/pin-mount.js
+  function mountMapPin(host, o = {}) {
+    let pin = null, gone = false, wantReplay = false;
+    const opts = { labels: o.labels, label: o.label, manual: o.manual };
+    if (o.autoplay === false) opts.autoplay = false;
+    if (o.fonts === false) opts.fonts = false;
+    const change = (e) => {
+      if (o.onChange) o.onChange(e.detail);
+    };
+    const confirm = (e) => {
+      if (o.onConfirm) o.onConfirm(e.detail);
+    };
+    host.addEventListener("pinchange", change);
+    host.addEventListener("pinconfirm", confirm);
+    const ready = loadPin().then((m) => {
+      if (gone) return null;
+      pin = m.mountPin(host, opts);
+      if (wantReplay) pin.replay();
+      return pin.ready.then(() => pin);
+    });
+    return {
+      ready,
+      replay: () => {
+        if (pin) pin.replay();
+        else wantReplay = true;
+      },
+      confirm: () => {
+        if (pin) pin.confirm();
+      },
+      tick: (dt, now) => {
+        if (pin) pin.tick(dt, now);
+      },
+      get address() {
+        return pin ? pin.address : null;
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("pinchange", change);
+        host.removeEventListener("pinconfirm", confirm);
+        if (pin) pin.destroy();
+        pin = null;
+      }
+    };
+  }
+
+  // src/tokens-load-cdn.js
+  var me5 = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base4 = me5 ? me5.slice(0, me5.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadTokens = () => import(base4 + "tokens.cdn.js");
+
+  // dist/tokens-mount.js
+  function mountTokenWheel(host, o = {}) {
+    let w = null, gone = false, wantReplay = false, wantTurn = o.turned ? true : null;
+    const opts = { labels: o.labels, frame: o.frame, controls: o.controls, autoplay: o.autoplay, fonts: o.fonts, gyroscope: o.gyroscope };
+    const cont = () => {
+      if (o.onContinue) o.onContinue();
+    };
+    host.addEventListener("tokenscontinue", cont);
+    const ready = loadTokens().then((m) => {
+      if (gone) return null;
+      w = m.mountTokens(host, opts);
+      if (wantTurn != null) w.turn(wantTurn);
+      if (wantReplay) w.replay();
+      return w.ready.then(() => w);
+    });
+    return {
+      ready,
+      replay: () => {
+        if (w) w.replay();
+        else wantReplay = true;
+      },
+      turn: (side) => {
+        if (w) return w.turn(side);
+        wantTurn = side == null ? !wantTurn : !!side;
+        return wantTurn;
+      },
+      gyroscope: () => w ? w.gyroscope() : Promise.resolve(false),
+      // call it from a tap: iOS asks the person first
+      get turned() {
+        return w ? w.turned : !!wantTurn;
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("tokenscontinue", cont);
+        if (w) w.destroy();
+        w = null;
+      }
+    };
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -2560,7 +2655,35 @@ void main() {
     cursor: el.getAttribute("cursor") === "false" ? false : void 0,
     fonts: el.getAttribute("fonts") === "false" ? false : void 0
   }));
+  define("map-pin", (el, o) => {
+    css("craft-pin-host", ":where(map-pin){display:block;position:relative;width:100%;height:560px}");
+    const m = mountMapPin(el, o);
+    el.replay = m.replay;
+    return m;
+  }, (el) => ({
+    labels: { title: el.getAttribute("label-title") ?? void 0, confirm: el.getAttribute("label-confirm") ?? void 0, confirmed: el.getAttribute("label-confirmed") ?? void 0 },
+    label: el.getAttribute("label") || void 0,
+    autoplay: el.getAttribute("autoplay") === "false" ? false : void 0,
+    fonts: el.getAttribute("fonts") === "false" ? false : void 0
+  }));
+  var off = (el, name) => el.getAttribute(name) === "false" ? false : void 0;
+  define("token-wheel", (el, o) => {
+    css("craft-tokens-host", ":where(token-wheel){display:block;position:relative;width:100%;height:900px}");
+    const m = mountTokenWheel(el, o);
+    el.replay = m.replay;
+    el.turn = m.turn;
+    el.gyroscope = m.gyroscope;
+    return m;
+  }, (el) => ({
+    labels: { eyebrow: el.getAttribute("label-eyebrow") ?? void 0, title: el.getAttribute("label-title") ?? void 0, cta: el.getAttribute("label-cta") ?? void 0, initials: el.getAttribute("initials") ?? void 0 },
+    frame: off(el, "frame"),
+    controls: off(el, "controls"),
+    autoplay: off(el, "autoplay"),
+    fonts: off(el, "fonts"),
+    gyroscope: off(el, "gyroscope"),
+    turned: el.hasAttribute("turned") && el.getAttribute("turned") !== "false"
+  }));
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };
 })();

package/dist/elements.js

@@ -1,4 +1,4 @@
-// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere> and <panorama-reel>: the
+// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel>, <map-pin> and <token-wheel>: the
 // pieces as HTML tags, for pages without React. They render into the page itself (no shadow root), so the glass can
 // blend with what is behind it.
 import { mountLike } from './like.js';
@@ -8,6 +8,8 @@ import { mountIridescentCard } from './card-mount.js';
 import { mountPiggyBank } from './piggy-mount.js';
 import { mountThinking } from './thinking.js';
 import { mountPanoramaReel } from './panorama-mount.js';
+import { mountMapPin } from './pin-mount.js';
+import { mountTokenWheel } from './tokens-mount.js';
 import { css } from './style.js';
 
 function define(name, mount, options) {
@@ -101,4 +103,35 @@ define('panorama-reel', (el, o) => {
   fonts: el.getAttribute('fonts') === 'false' ? false : undefined
 }));
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel };
+// the map pin fills the tag: a block, 100% wide and 560px tall unless the page sizes it. Each address the pin is sent to
+// fires "pinchange" and a confirmation "pinconfirm", both with e.detail { address, neighbourhood, place }. The words:
+// label-title, label-confirm, label-confirmed. el.replay() flies the pin off and back in.
+define('map-pin', (el, o) => {
+  css('craft-pin-host', ':where(map-pin){display:block;position:relative;width:100%;height:560px}');
+  const m = mountMapPin(el, o);
+  el.replay = m.replay;
+  return m;
+}, (el) => ({
+  labels: { title: el.getAttribute('label-title') ?? undefined, confirm: el.getAttribute('label-confirm') ?? undefined, confirmed: el.getAttribute('label-confirmed') ?? undefined },
+  label: el.getAttribute('label') || undefined,
+  autoplay: el.getAttribute('autoplay') === 'false' ? false : undefined,
+  fonts: el.getAttribute('fonts') === 'false' ? false : undefined
+}));
+
+// the token wheel fills the tag: a block, 100% wide and 900px tall unless the page sizes it. Its white pill fires
+// "tokenscontinue". The words: label-eyebrow, label-title, label-cta, initials. frame="false" fills the tag with the
+// screen (a real phone), controls="false" hides the round buttons, turned lays it on its side; from code, el.turn(true)
+// lays it down, el.turn(false) stands it up and el.replay() plays the opening again.
+const off = (el, name) => (el.getAttribute(name) === 'false' ? false : undefined);
+define('token-wheel', (el, o) => {
+  css('craft-tokens-host', ':where(token-wheel){display:block;position:relative;width:100%;height:900px}');
+  const m = mountTokenWheel(el, o);
+  el.replay = m.replay; el.turn = m.turn; el.gyroscope = m.gyroscope;
+  return m;
+}, (el) => ({
+  labels: { eyebrow: el.getAttribute('label-eyebrow') ?? undefined, title: el.getAttribute('label-title') ?? undefined, cta: el.getAttribute('label-cta') ?? undefined, initials: el.getAttribute('initials') ?? undefined },
+  frame: off(el, 'frame'), controls: off(el, 'controls'), autoplay: off(el, 'autoplay'), fonts: off(el, 'fonts'), gyroscope: off(el, 'gyroscope'),
+  turned: el.hasAttribute('turned') && el.getAttribute('turned') !== 'false'
+}));
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };

package/dist/index.js

@@ -8,6 +8,8 @@ import { mountIridescentCard } from './card-mount.js';
 import { mountPiggyBank } from './piggy-mount.js';
 import { mountThinking } from './thinking.js';
 import { mountPanoramaReel } from './panorama-mount.js';
+import { mountMapPin } from './pin-mount.js';
+import { mountTokenWheel } from './tokens-mount.js';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -102,4 +104,36 @@ export function PanoramaReel({ height = 640, title, text, textItalic, video, sti
   return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', height, ...style } });
 }
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel };
+// The map pin fills the box it renders (100% wide and `height` tall, 560px by default) with a city map and a glass pin:
+// a click on a street sends the pin to its curb, and the card under the map confirms the address. onChange and onConfirm
+// get { address, neighbourhood, place }. labels: { title, confirm, confirmed }, the card's words. replay: change it (a
+// counter) to fly the pin off and back in. It loads its 3D scene (three.js) the first time it mounts.
+export function MapPin({ height = 560, labels, label, autoplay, fonts, replay, onChange, onConfirm, className, style }) {
+  const host = useRef(null), pin = useRef(null), last = useRef(replay), change = useLatest(onChange), confirm = useLatest(onConfirm);
+  const key = JSON.stringify([labels, label, autoplay, fonts]);
+  useEffect(() => {
+    const m = pin.current = mountMapPin(host.current, { labels, label, autoplay, fonts, onChange: (a) => change.current && change.current(a), onConfirm: (a) => confirm.current && confirm.current(a) });
+    return () => { m.destroy(); pin.current = null; };
+  }, [key]);
+  useEffect(() => { if (last.current === replay) return; last.current = replay; if (pin.current) pin.current.replay(); }, [replay]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', height, ...style } });
+}
+
+// The token wheel fills the box it renders (100% wide and `height` tall, 900px by default): an account onboarding screen
+// whose silver tokens turn on a wheel. With the frame (the default) the screen sits in a phone that scales to fit the box,
+// with two round buttons beside it, turn it on its side and replay; turned lays it down from code, and the tokens fall
+// and pile up against the edge. frame={false} fills the box with the screen itself, for a real phone, where the phone's
+// own tilt moves the tokens. onContinue: the white pill. It loads its 3D scene (three.js) the first time it mounts.
+export function TokenWheel({ height = 900, labels, frame, controls, autoplay, fonts, gyroscope, turned, replay, onContinue, className, style }) {
+  const host = useRef(null), wheel = useRef(null), last = useRef(replay), cont = useLatest(onContinue);
+  const key = JSON.stringify([labels, frame, controls, autoplay, fonts, gyroscope]);
+  useEffect(() => {
+    const m = wheel.current = mountTokenWheel(host.current, { labels, frame, controls, autoplay, fonts, gyroscope, turned, onContinue: () => cont.current && cont.current() });
+    return () => { m.destroy(); wheel.current = null; };
+  }, [key]);
+  useEffect(() => { const m = wheel.current; if (m && turned != null && m.turned !== !!turned) m.turn(!!turned); }, [turned]);
+  useEffect(() => { if (last.current === replay) return; last.current = replay; if (wheel.current) wheel.current.replay(); }, [replay]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', height, ...style } });
+}
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };

package/dist/panorama-assets.js

@@ -1,2 +1,2 @@
 // where the Panorama's own clip and pictures are: jsDelivr, at this version of the package
-export const ASSETS = 'https://cdn.jsdelivr.net/npm/craft-library@0.5.0/dist/panorama/';
+export const ASSETS = 'https://cdn.jsdelivr.net/npm/craft-library@0.7.0/dist/panorama/';

package/dist/pin-load.js

@@ -0,0 +1,2 @@
+// where the map pin comes from: for bundlers, the package's pin.js (it imports the `three` dependency)
+export const loadPin = () => import('./pin.js');

package/dist/pin-mount.js

@@ -0,0 +1,30 @@
+// Map pin: the mount around the library's pin.js. pin.js, and three.js with it, loads only when a map pin is mounted,
+// so the other pieces stay light.
+import { loadPin } from './pin-load.js';
+
+// host: the element the map fills (give it a size; it is made for about 560 × 560). o: { labels: { title, confirm,
+// confirmed }, label (the map's accessible name), autoplay (false: the pin waits for replay()), fonts (false: don't load
+// DM Sans), onChange(address), onConfirm(address) }; address: { address, neighbourhood, place }
+export function mountMapPin(host, o = {}) {
+  let pin = null, gone = false, wantReplay = false;
+  const opts = { labels: o.labels, label: o.label, manual: o.manual };
+  if (o.autoplay === false) opts.autoplay = false;
+  if (o.fonts === false) opts.fonts = false;
+  const change = (e) => { if (o.onChange) o.onChange(e.detail); };
+  const confirm = (e) => { if (o.onConfirm) o.onConfirm(e.detail); };
+  host.addEventListener('pinchange', change); host.addEventListener('pinconfirm', confirm);
+  const ready = loadPin().then((m) => {
+    if (gone) return null;
+    pin = m.mountPin(host, opts);
+    if (wantReplay) pin.replay();
+    return pin.ready.then(() => pin);
+  });
+  return {
+    ready,
+    replay: () => { if (pin) pin.replay(); else wantReplay = true; },
+    confirm: () => { if (pin) pin.confirm(); },
+    tick: (dt, now) => { if (pin) pin.tick(dt, now); },
+    get address() { return pin ? pin.address : null; },
+    destroy() { gone = true; host.removeEventListener('pinchange', change); host.removeEventListener('pinconfirm', confirm); if (pin) pin.destroy(); pin = null; }
+  };
+}