panelui-web 0.0.0-stage → 0.2.0

package/dist/components/planet/land.js

@@ -0,0 +1,122 @@
+// Generated by scripts/generate-land.mjs from Natural Earth's 1:110m land polygons,
+// which are in the public domain. Do not edit.
+/** Cells per row and rows in the grid: one cell per degree. */
+export const LAND_COLUMNS = 360;
+export const LAND_ROWS = 180;
+/**
+ * Where the land is. One bit per cell, row 0 northernmost and column 0
+ * westernmost, packed eight to a byte from the low bit and base64 encoded.
+ */
+export const LAND = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg' +
+    '/wEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADA/v8/AOD//z8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAD+///D/////5//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAH/j/+//////8PAAAAgB0A' +
+    'AHgAAAAAAD8AAAAAAAAAAAAAAAAAAAAAAAAAAOD//wP8//////8BAACAfx4AAAAAAAAAAP4AAAAAAAAAAAAAAAAAAAAAAAA4' +
+    '+I73//n///////8AAAAAfwAAAAAAAAAAAAAfAAAAAAAAAAAAAAAAAAAAAOAQACDwP4D///////8BAAAAPAQAAAAAAAAAAAAY' +
+    'AAAAAAAAAAAAAAAAAAAAADzAgPP5H8D//////38AAAAAAAAAAAAA4AEAAAD+DwAAAAAAAAAAAAAAAAAAAIC/g7PfBwAA/v//' +
+    '//8AAAAAAAAAAADgBwAAwP//PwAA4B8AAAAAAAAAAAAAAAAMAAD8AgAA+P////8AAAAAAAAAAABwAAAA/P//AwAAAAAAAAAA' +
+    'AAAAAAAAAP8Ahvc5OwAA8P///38AAAAAAAAAAAAcAADg////34cHAAcAAAAAAAAAAAAAgN9/xzf8RwAA4P///z8AAAAAAAAA' +
+    'AAAPAB7g//////8fgB8AAAAAAQAAAAAAAO//B3f8/wsA4P///z8AAAAAAAAAAAAPAG////////8f2f8HAAAAAAD4HwAAAAD8' +
+    'H/D4/38A4P///xMAAAAAAPAHAAAAgN//////////////DwAAAAD+///h/4//H+/Bg/8BwP7//w8AAAAAwP8fAAAAj9//////' +
+    '/////////88/AeD///////8DB8TPB/4AAP///wAAAAAA8P//AwDjf77/////////////////DwD////////////vh/kPwP//' +
+    'BwAAAAAA/P//H/P//5//////////////////34H8////////////Afw/gP//AQAAAAAA/v+fH////+//////////////////' +
+    '/vD///////////9fAPwYgP8PAOA/AAAA/+N/8P//////////////////////QID4///////////Pw/0DAP8HAMAfAACA//F/' +
+    '/v////////////////////8/AAP4///////////BBPAHAP4HAAAAAADg//z///////////////////////9/AID/////////' +
+    '//8AQ8ABAPwBAAAAAAD8P/7///////////////////////9fAMD//////////z8AwA8AAPgBAAAAAAD+H/7/////////////' +
+    '////////Of8BAID///z//////z8AwD8AAMABAAAAAAD+P/z///////////////////9/wH8AAAD8MwD//////x8AwH8MAAAA' +
+    'AAAAAAD+P2D///////////////////95cAAAAACAAwD8/////38AwP8eAAAAAAAAgAGcH/D//////////////////wEAOAAA' +
+    'AADADgDA/////38AgP8/AAAAAAAAwANAH/T//////////////////wAAfgAAAAAwAAAA//////8PgP8/AAAAAAAAwAFwD/7/' +
+    '////////////////PwAAfwAAAAAGAAAA//////8/wP//AAAAAAAAwAOwA/7/////////////////DwCAPwAAAIAAAAAA/v//' +
+    '////8///BwAAAAAAOAcgcP//////////////////HwAAHwAAAAAAAACA+P//////4///DwAAAAAAOA74////////////////' +
+    '/////wUADwAAAAAAAAAA8P//////4///DwAAAAAAGD///////////////////////wUAAwAAAAAAAAAA8P//////7///FwAA' +
+    'AAAAAB///////////////////////wUAAgAAAAAAAAAA0P//////////CAAAAAAAgOH//////////////////////w0AAAAA' +
+    'AAAAAAAAYP////////8xLAAAAAAAAPz//////////////////////wwAAAAAAAAAAAAAAP7//////38HfgAAAAAAgP//////' +
+    '/////////////////wQAAAAAAAAAAAAAAP3///////8HUAAAAAAAAP7/////////////////////fwQAAAAAAAAAAAAAAP//' +
+    '//////+XAAAAAAAAAPz///93/P//////////////PwwAAAAAAAAAAAAAAP////////9/AAAAAAAAAPj//f9j/v//////////' +
+    '////HwAAAAAAAAAAAAAAAP////////8MAAAAAAAAAPj/+P8B/P//////////////DwQAAAAAAAAAAAAAAP///////z8AAAAA' +
+    'AAAAcPzH8/8A8P//////////////Bx4AAAAAAAAAAAAAAP///////x8AAAAAAAAA+H+Aw/8AwP////////////9/AA8AAAAA' +
+    'AAAAAAAAAP///////x8AAAAAAAAA+D8Aj//w4f////////////8/AAAAAAAAAAAAAAAAAP///////wMAAAAAAAAA+B8wuE/+' +
+    '/////////////98fAAMAAAAAAAAAAAAAAP///////wMAAAAAAAAA+A8wEMf//////////////0cOAAMAAAAAAAAAAAAAAP7/' +
+    '/////wEAAAAAAAAA+A8AAI7//////////////wMOAAEAAAAAAAAAAAAAAP7//////wAAAAAAAAAA+AcABob/////////////' +
+    '/zccwAEAAAAAAAAAAAAAAPz//////wAAAAAAAAAAQOB/AAQ2/////////////x8c8AEAAAAAAAAAAAAAAPj//////wAAAAAA' +
+    'AAAAQPx/AAAA/////////////w8Y/gEAAAAAAAAAAAAAAPD/////fwAAAAAAAAAA4P8/AAAA/////////////w+EGwAAAAAA' +
+    'AAAAAAAAAMD/////HwAAAAAAAAAA8P9/AACA/////////////x/AAwAAAAAAAAAAAAAAAID/////DwAAAAAAAAAA+P//BwaA' +
+    '/////////////x/AAAAAAAAAAAAAAAAAAID9////BwAAAAAAAAAA/P//D3+E/////////////z9AAAAAAAAAAAAAAAAAAAD5' +
+    '////BwAAAAAAAAAA/P//f////////////////x8AAAAAAAAAAAAAAAAAAADy/x8GBgAAAAAAAAAA/P/////v/8//////////' +
+    '/z8AAAAAAAAAAAAAAAAAAAD0/w8ABgAAAAAAAAAA/v////+//4///////////z8AAAAAAAAAAAAAAAAAAADu/wcADgAAAAAA' +
+    'AACA//////8f/x/+/////////x8AAAAAAAAAAAAAAAAAAACI/wcALAAAAAAAAADA//////8//z/g/////////w8AAAAAAAAA' +
+    'AAAAAAAAAACQ/wcACAAAAAAAAADg//////9//r+A/////////wcAAAAAAAAAAAAAAAAAAAAQ/wMAAAAAAAAAAADg//////9/' +
+    '/n8cgP///////ycAAAAAAAAAAAAAAAAAAAAA/gMAAAAAAAAAAADw////////+P9/AP///////xEAAAAAAAAAAAAAAAAAAAAA' +
+    '/AMAHQAAAAAAAADw////////+P//APz/f///fxAAAAAAAAAAAAAAAAAAAAAA+AcAYAAAAAAAAAD4////////+f9/APz/B///' +
+    'BgAAAAAAAAAAAAAAAAAAAAAA/AccgAEAAAAAAADw////////8f9/AOD/B/5/AAAAAAAAAAAAAAAAAQAAAAAA+A8eADgAAAAA' +
+    'AADw////////4f8/AOD/Afw/BgAAAAAAAAAAAAAAAAAAAAAA8J8PAPwCAAAAAADw////////4/8fAOD/APw/AgAAAAAAAAAA' +
+    'AAAAAAAAAAAAgP8PAAAAAAAAAADw////////x/8HAOB/APx/ADAAAAAAAAAAAAAAAAAAAAAAAP4PAAAAAAAAAAD4////////' +
+    'h/8BAOA/APz/ADAAAAAAAAAAAAAAAAAAAAAAAID/AAAAAAAAAAD4////////j/8AAMAPAMD/ATAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAD/AQAAAAAAAAD4////////nx8AAMAPAMD/ATAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAAAAAD4////////vwcAAIAPAMD/' +
+    'AcAAAAAAAAAAAAAAAAAAAAAAAADgAQAAAAAAAAD4////////fwAAAIAPAMD8AQABAAAAAAAAAAAAAAAAAAAAAADAAAgAAAAA' +
+    'AADw////////f2AAAAAPAID4AUACAAAAAAAAAAAAAAAAAAAAAADAAe9zAAAAAADg/////////34AAAAPAEBwAAgAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAE+9/AAAAAADA/////////38AAAAXAEAgAAQCAAAAAAAAAAAAAAAAAAAAAAAAz///AAAAAACA////////' +
+    '/z8AAAASAMAAAIACAAAAAAAAAAAAAAAAAAAAAAAAyP//AQAAAACA/////////z8AAAAwAIAAAEAHAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAgP//AwAAAAAA/v///////x8AAAAwAAADAAMBAAAAAAAAAAAAAAAAAAAAAAAAwP//fwAAAAAA/A/+/////x8AAAAAAAAH' +
+    'AAcAAAAAAAAAAAAAAAAAAAAAAAAAgP///wAAAAAAEAD8/////w8AAAAAADAGwAcAAAAAAAAAAAAAAAAAAAAAAAAAgP///wEA' +
+    'AAAAAADA/////wcAAAAAAGAG4AEAAAAAAAAAAAAAAAAAAAAAAAAA4P///wEAAAAAAADA/////wMAAAAAAMAM+AMAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAA4P///wMAAAAAAADg/////wEAAAAAAIAL/gMQAAAAAAAAAAAAAAAAAAAAAAAA8P///wMAAAAAAADg////' +
+    'fwAAAAAAAIAH/vMQAAAAAAAAAAAAAAAAAAAAAAAA8P///wcAAAAAAADg////PwAAAAAAAAAP/gMAAQAAAAAAAAAAAAAAAAAA' +
+    'AAAA+P///38AAAAAAADg////PwAAAAAAAAAO/DmAAwAAAAAAAAAAAAAAAAAAAAAA+P///38BAAAAAADA////HwAAAAAAAAA+' +
+    '/DkA8gAAAAAAAAAAAAAAAAAAAAAA8P////8fAAAAAACA////DwAAAAAAAAA8wChE/gcAAAAAAAAAAAAAAAAAAAAA+P////8/' +
+    'AAAAAACA////BwAAAAAAAAA4AEAA8B8AAAAAAAAAAAAAAAAAAAAA+P//////AQAAAAAA////BwAAAAAAAAAwAEAAxD8NAAAA' +
+    'AAAAAAAAAAAAAAAA+P//////AQAAAAAA////BwAAAAAAAADAAQAAxP+AAAAAAAAAAAAAAAAAAAAA8P//////AQAAAAAA/v//' +
+    'BwAAAAAAAACAHwAAwH8ABAAAAAAAAAAAAAAAAAAA4P//////AQAAAAAA/v//BwAAAAAAAAAAQFYEAMcAAAAAAAAAAAAAAAAA' +
+    'AAAA4P//////AAAAAAAA/v//DwAAAAAAAAAAAAgBAIABMAAAAAAAAAAAAAAAAAAAwP//////AAAAAAAA/v//DwAAAAAAAAAA' +
+    'AAAAAAAEAAAAAAAAAAAAAAAAAAAAgP////9/AAAAAAAA/P//DwAAAAAAAAAAAAAAAQQAAAAAAAAAAAAAAAAAAAAAgP////8/' +
+    'AAAAAAAA/v//HyAAAAAAAAAAAACAHwQAAAAAAAAAAAAAAAAAAAAAAP////8fAAAAAAAA/v//HyAAAAAAAAAAAADADwwAAAAA' +
+    'AAAAAAAAAAAAAAAAAP////8fAAAAAAAA////HzAAAAAAAAAAAADsDxwAAAAAAAAAAAAAAAAAAAAAAP7///8fAAAAAAAA////' +
+    'DzgAAAAAAAAAAAD/DxwAAAAAAAAAAAAAAAAAAAAAAPj///8fAAAAAAAA////Dz8AAAAAAAAAAAD/Pz4AAAiAAAAAAAAAAAAA' +
+    'AAAAAOD///8fAAAAAAAA////Ax8AAAAAAAAAAMD//z4AAABAAAAAAAAAAAAAAAAAAMD///8PAAAAAAAA////AB8AAAAAAAAA' +
+    'AMD//z8AAAAAAAAAAAAAAAAAAAAAAMD///8PAAAAAAAA/v9/AB8AAAAAAAAAAOD//38AAAAAAAAAAAAAAAAAAAAAAMD///8P' +
+    'AAAAAAAA/v9/AB8AAAAAAAAAAPz///8BAAEAAAAAAAAAAAAAAAAAAMD///8HAAAAAAAA/P9/gA8AAAAAAAAAgP////8BAAIA' +
+    'AAAAAAAAAAAAAAAAAMD///8DAAAAAAAA/P//gA8AAAAAAAAAwP////8DAAAAAAAAAAAAAAAAAAAAAMD//38AAAAAAAAA/P9/' +
+    'AA8AAAAAAAAAwP////8HAAAAAAAAAAAAAAAAAAAAAOD//x8AAAAAAAAA+P9/AAcAAAAAAAAA4P////8PAAAAAAAAAAAAAAAA' +
+    'AAAAAOD//w8AAAAAAAAA+P8fAAIAAAAAAAAAwP////8fAAAAAAAAAAAAAAAAAAAAAOD//wcAAAAAAAAA+P8fAAAAAAAAAAAA' +
+    '4P////8fAAAAAAAAAAAAAAAAAAAAAOD//wcAAAAAAAAA+P8fAAAAAAAAAAAAwP////8fAAAAAAAAAAAAAAAAAAAAAOD//wcA' +
+    'AAAAAAAA8P8PAAAAAAAAAAAAgP////8/AAAAAAAAAAAAAAAAAAAAAOD//wMAAAAAAAAA4P8HAAAAAAAAAAAAgP////8fAAAA' +
+    'AAAAAAAAAAAAAAAAAPD//wMAAAAAAAAA4P8HAAAAAAAAAAAAgP////8fAAAAAAAAAAAAAAAAAAAAAPD//wEAAAAAAAAAwP8D' +
+    'AAAAAAAAAAAAAP////8fAAAAAAAAAAAAAAAAAAAAAOD//wAAAAAAAAAAwP8BAAAAAAAAAAAAAP8D/P8PAAAAAAAAAAAAAAAA' +
+    'AAAAAPD/fwAAAAAAAAAAwH8AAAAAAAAAAAAAgP8A2P8HAAAAAAAAAAAAAAAAAAAAAPD/OwAAAAAAAAAAgAEAAAAAAAAAAAAA' +
+    'AAcA6P8HAAAAAAAAAAAAAAAAAAAAAPj/BwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwP8DAAACAAAAAAAAAAAAAAAAAPj/BwAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8DAAAEAAAAAAAAAAAAAAAAAPz/BwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8DAAAI' +
+    'AAAAAAAAAAAAAAAAAPj/AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgAAAA4AAAAAAAAAAAAAAAAAPg/AAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAPw/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYAAAAAAAAAAAA' +
+    'AAAAAPwHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAALAAAAAAAAAAAAAAAAAPwfAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAOAAAIADAAAAAAAAAAAAAAAAAPgHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAMABAAAAAAAAAAAAAAAAAPwHAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAAAP4BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHgA' +
+    'AAAAAAAAAAAAAAAAAP4BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAP4DAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAP8AAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH4AAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAH6AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAPADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAAAAAAAAAAIAfAAAAAAAe' +
+    'eADADwAAAAAAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAPD/AADA/////////z8AAAAAAAAAAAAAAAAAAAAAAAAHAAAA' +
+    'AAAAAAAAAAAAgP///wH4//////////8DAAAAAAAAAAAAAAAAAAAAADAfAAAAAAAAAAAAAADw8////wP+////////////AwAA' +
+    'AAAAAAAAAAAAAAAAAHA/AAAAAAAAAAA8//P//////+D/////////////HwAAAAAAAAAAAAAAAAAAAP5+AAAAAAAA5v//////' +
+    '//////D//////////////38AAAAAAAAAAAAAAAAAAAB+AAAAAACA/////////////////////////////38AAAAAAAAAYAYA' +
+    '4ON/OPh/AAAAAADw/////////////////////////////x8AAAAAAADwv/MXgP////8fAAAAAADw////////////////////' +
+    '/////////wMAAAAAAPz///////////8HAAAAAAD+/////////////////////////////wAAAAAAAPz//////////z8AAAAA' +
+    'AP///////////////////////////////wAAAADA/////////////wEAAAAA8P///////////////////////////////wAA' +
+    'AACH////////////PwAAAPgA/////////////////////////////////wcAAAAcgP//////////fwAAAP4BwP//////////' +
+    '////////////////////HwAAAAAAAP7//////////wf8wD8AwP//////////////////////////////DwAAAAAA/v//////' +
+    '//////8HAAD4////////////////////////////////HwAAAAAA+P//////////////4f//////////////////////////' +
+    '/////////wAAAAAA/P///////////////////////////////////////////////////x8A3x8AAP7/////////////////' +
+    '//////////////////////////////////8/AAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
+    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';

package/dist/components/range-meter/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * RangeMeter — where a reading sits between its lowest and its highest, on a
+ * ruler of ticks that rises under the value.
+ *
+ * ```tsx
+ * <RangeMeter min={80} max={600} value={time} onValueChange={setTime} marker={300} />
+ * ```
+ *
+ * ## The ruler swells where the reading is
+ *
+ * The track is a row of ticks. The ones up to the reading are lit, and the
+ * ticks round the reading stand taller, falling away on either side, so the
+ * value is a rise in the ruler and not a knob sitting on a line. Dragging
+ * moves the rise along, and the ticks it leaves settle back behind it.
+ *
+ * ## The number rides above
+ *
+ * The value is written in a tag over the rise, so the place on the ruler and
+ * the figure are one thing to read. The tag is hung from the point it marks
+ * in proportion to how far along that point is: from its left edge at the low
+ * end, its middle half way, its right edge at the high end. It is always over
+ * the reading and never outside the ruler.
+ *
+ * ## A reading or a control
+ *
+ * With `onValueChange` it is a slider: drag it, or use the arrow keys. Without
+ * it, the same drawing is a meter that shows a value and cannot be moved.
+ * Either way a screen reader is given the value and the range it is in.
+ *
+ * ## The colour is the theme's
+ *
+ * `color` names one of the theme's roles. Changing it as the value crosses a
+ * threshold is how a meter says the reading has gone from fine to not.
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+/** Which of the theme's roles the lit ticks and the tag are drawn in. */
+export type RangeMeterColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+export interface RangeMeterProps extends Omit<ComponentProps<'div'>, 'onChange' | 'color'> {
+    /** The low end of the ruler. */
+    min?: number;
+    /** The high end of the ruler. */
+    max?: number;
+    /** The reading: where the ruler rises and the number written above it. */
+    value: number;
+    /**
+     * Called with the new value as the ruler is dragged or moved with the
+     * keyboard. Passing this makes it a slider; without it, it is a meter.
+     */
+    onValueChange?: (value: number) => void;
+    /** How much one arrow key press moves the value, and what a drag snaps to. */
+    step?: number;
+    /** A value to mark under the ruler, such as a target. */
+    marker?: number;
+    /** How many ticks the ruler is drawn with. */
+    ticks?: number;
+    /** Which of the theme's roles the lit ticks and the tag are drawn in. */
+    color?: RangeMeterColor;
+    /** Writes the number in the tag. Defaults to the value as it is. */
+    formatValue?: (value: number) => ReactNode;
+    /** What a screen reader calls it. */
+    label?: string;
+    /** What a screen reader says for the value: "240 milliseconds". */
+    valueText?: string;
+    /** Drawn in the tag before the number: an icon. */
+    children?: ReactNode;
+}
+export declare function RangeMeter({ min, max, value, onValueChange, step, marker, ticks, color, formatValue, label, valueText, className, children, ...props }: RangeMeterProps): import("react").JSX.Element;
+export declare namespace RangeMeter {
+    var displayName: string;
+}

package/dist/components/range-meter/index.js

@@ -0,0 +1,170 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * RangeMeter — where a reading sits between its lowest and its highest, on a
+ * ruler of ticks that rises under the value.
+ *
+ * ```tsx
+ * <RangeMeter min={80} max={600} value={time} onValueChange={setTime} marker={300} />
+ * ```
+ *
+ * ## The ruler swells where the reading is
+ *
+ * The track is a row of ticks. The ones up to the reading are lit, and the
+ * ticks round the reading stand taller, falling away on either side, so the
+ * value is a rise in the ruler and not a knob sitting on a line. Dragging
+ * moves the rise along, and the ticks it leaves settle back behind it.
+ *
+ * ## The number rides above
+ *
+ * The value is written in a tag over the rise, so the place on the ruler and
+ * the figure are one thing to read. The tag is hung from the point it marks
+ * in proportion to how far along that point is: from its left edge at the low
+ * end, its middle half way, its right edge at the high end. It is always over
+ * the reading and never outside the ruler.
+ *
+ * ## A reading or a control
+ *
+ * With `onValueChange` it is a slider: drag it, or use the arrow keys. Without
+ * it, the same drawing is a meter that shows a value and cannot be moved.
+ * Either way a screen reader is given the value and the range it is in.
+ *
+ * ## The colour is the theme's
+ *
+ * `color` names one of the theme's roles. Changing it as the value crosses a
+ * threshold is how a meter says the reading has gone from fine to not.
+ */
+import { useCallback, useRef, } from 'react';
+import { tv } from 'tailwind-variants';
+const rangeMeterVariants = tv({
+    slots: {
+        // Room above the ruler for the tag, so the tag is inside the control's
+        // own box and cannot be clipped by whatever the meter sits in.
+        root: 'relative w-full touch-none select-none rounded-lg pt-9 outline-none rtl:[--pu-dir:-1] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background',
+        ruler: 'relative flex h-10 items-end justify-between',
+        tick: 'w-[3px] rounded-full transition-[height,background-color,opacity,box-shadow] duration-200 ease-out motion-reduce:transition-none',
+        marker: 'pointer-events-none absolute -bottom-2.5 size-1.5 -translate-x-1/2 rotate-45 rounded-[1px] bg-foreground rtl:translate-x-1/2',
+        tag: 'pointer-events-none absolute top-0 flex h-7 items-center gap-1 whitespace-nowrap rounded-full bg-[var(--pu-color)] px-2.5 text-xs font-semibold tabular-nums text-[var(--pu-on-color)] shadow-[0_6px_18px_-4px_color-mix(in_oklab,var(--pu-color)_70%,transparent)] transition-[background-color,box-shadow,scale] duration-200 motion-reduce:transition-none [&_svg]:size-3.5 [&_svg]:shrink-0',
+    },
+    variants: {
+        /*
+         * A role and what is written on it. `primary` has a partner in every
+         * theme. The status roles are mid-tones, light enough that the theme
+         * writes on them in near-black whether the page is light or dark.
+         */
+        color: {
+            primary: { root: '[--pu-color:var(--primary)] [--pu-on-color:var(--primary-foreground)]' },
+            info: { root: '[--pu-color:var(--info)] [--pu-on-color:var(--color-neutral-900)]' },
+            success: { root: '[--pu-color:var(--success)] [--pu-on-color:var(--color-neutral-900)]' },
+            warning: { root: '[--pu-color:var(--warning)] [--pu-on-color:var(--color-neutral-900)]' },
+            destructive: {
+                root: '[--pu-color:var(--destructive)] [--pu-on-color:var(--color-neutral-900)]',
+            },
+        },
+        lit: {
+            true: { tick: 'bg-[var(--pu-color)]' },
+            false: { tick: 'bg-muted-foreground/25' },
+        },
+        // The tick the reading is on, which is the top of the rise.
+        crest: {
+            true: {
+                tick: 'shadow-[0_0_10px_color-mix(in_oklab,var(--pu-color)_70%,transparent)]',
+            },
+        },
+        // The marker hangs under the ruler, and the control makes room for it.
+        marked: {
+            true: { root: 'pb-4' },
+        },
+        interactive: {
+            true: { root: 'cursor-grab active:cursor-grabbing active:[&_[data-tag]]:scale-110' },
+        },
+    },
+});
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+/** How many ticks either side of the reading the rise spreads over. */
+const SPREAD = 2.6;
+/** A resting tick's height, as a share of the ruler's. */
+const REST = 0.34;
+export function RangeMeter({ min = 0, max = 100, value, onValueChange, step = 1, marker, ticks = 41, color = 'primary', formatValue, label = 'Reading', valueText, className, children, ...props }) {
+    const interactive = onValueChange !== undefined;
+    const slots = rangeMeterVariants({ color, interactive, marked: marker !== undefined });
+    const ruler = useRef(null);
+    const dragging = useRef(false);
+    const count = Math.max(2, Math.round(ticks));
+    const span = max - min || 1;
+    const share = clamp((value - min) / span, 0, 1);
+    // Where the reading falls among the ticks, as a position between two of
+    // them, so the rise slides along the ruler and does not hop tick to tick.
+    const at = share * (count - 1);
+    const crest = Math.round(at);
+    // Rounded to the step's own precision, so 0.1 steps do not come back as
+    // 0.30000000000000004.
+    const places = (String(step).split('.')[1] ?? '').length;
+    const settle = useCallback((raw) => clamp(Number((Math.round(raw / step) * step).toFixed(places)), min, max), [step, places, min, max]);
+    const fromPointer = useCallback((clientX) => {
+        const node = ruler.current;
+        const box = node?.getBoundingClientRect();
+        if (!node || !box || box.width === 0)
+            return;
+        const rtl = getComputedStyle(node).direction === 'rtl';
+        const along = rtl ? box.right - clientX : clientX - box.left;
+        onValueChange?.(settle(min + clamp(along / box.width, 0, 1) * span));
+    }, [min, span, settle, onValueChange]);
+    const onPointerDown = (event) => {
+        if (!interactive || event.button !== 0)
+            return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragging.current = true;
+        fromPointer(event.clientX);
+    };
+    const onPointerMove = (event) => {
+        if (dragging.current)
+            fromPointer(event.clientX);
+    };
+    const endDrag = () => {
+        dragging.current = false;
+    };
+    const onKeyDown = (event) => {
+        if (!interactive)
+            return;
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const page = Math.max(step, Math.round(span / 10 / step) * step);
+        const moves = {
+            ArrowLeft: value + (rtl ? step : -step),
+            ArrowRight: value + (rtl ? -step : step),
+            ArrowDown: value - step,
+            ArrowUp: value + step,
+            PageDown: value - page,
+            PageUp: value + page,
+            Home: min,
+            End: max,
+        };
+        const next = moves[event.key];
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        onValueChange(clamp(Number(next.toFixed(places)), min, max));
+    };
+    return (_jsxs("div", { role: interactive ? 'slider' : 'meter', "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": valueText, "aria-orientation": interactive ? 'horizontal' : undefined, tabIndex: interactive ? 0 : undefined, className: slots.root({ className }), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: onKeyDown, ...props, children: [_jsxs("span", { "data-tag": "", className: slots.tag(), style: {
+                    insetInlineStart: `${(share * 100).toFixed(2)}%`,
+                    // Hung by the same share of its own width as the point is along the
+                    // ruler, which keeps it over the point and inside the ends.
+                    translate: `calc(${share.toFixed(4)} * -100% * var(--pu-dir, 1))`,
+                }, children: [children, formatValue ? formatValue(value) : value] }), _jsxs("div", { ref: ruler, "aria-hidden": "true", className: slots.ruler(), children: [Array.from({ length: count }, (_, index) => {
+                        const distance = (index - at) / SPREAD;
+                        // A bell: full height at the reading, resting height a few ticks out.
+                        const rise = Math.exp(-distance * distance);
+                        const lit = index <= at + 0.001;
+                        const part = rangeMeterVariants({ lit, crest: index === crest });
+                        return (_jsx("span", { className: part.tick(), style: {
+                                // Rounded, so the server and the browser write the same
+                                // string for it and the page hydrates without a mismatch.
+                                height: `${((REST + (1 - REST) * rise) * 100).toFixed(1)}%`,
+                                // Lit ticks brighten towards the reading, like a tail behind it.
+                                opacity: lit
+                                    ? Number((0.35 + 0.65 * (crest === 0 ? 1 : Math.min(1, index / crest))).toFixed(3))
+                                    : undefined,
+                            } }, index));
+                    }), marker !== undefined ? (_jsx("span", { className: slots.marker(), style: { insetInlineStart: `${(clamp((marker - min) / span, 0, 1) * 100).toFixed(2)}%` } })) : null] })] }));
+}
+RangeMeter.displayName = 'RangeMeter';

package/dist/components/rolling-number/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * RollingNumber — a number whose digits roll to their new values.
+ *
+ * ```tsx
+ * <RollingNumber value={events} />
+ * <RollingNumber value={balance} format={{ style: 'currency', currency: 'USD' }} />
+ * ```
+ *
+ * Every digit is a column of ten, and the column is moved by a share of its
+ * own height. Nothing is measured: one hidden `0` in flow gives the column the
+ * width and the line box the font really has, and the ten digits stacked over
+ * it are each exactly that tall, so `translateY(-30%)` is the 3 whatever the
+ * type size turns out to be.
+ *
+ * That hidden `0` is also why the number sits on the text's baseline. A box
+ * that clips its overflow takes its bottom edge as its baseline, which would
+ * lift every digit above the words beside it. Here the clipping is done by an
+ * absolutely positioned window inside the column, and the column's baseline
+ * is still the `0`'s.
+ *
+ * The columns are keyed from the decimal point outwards. Going from 99 to 100
+ * adds a hundreds column rather than re-labelling the two that were there, so
+ * the nines roll to zeroes instead of being replaced by them.
+ */
+import { type ComponentProps } from 'react';
+export interface RollingNumberProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /** The number to show. Each digit rolls to its new value on its own. */
+    value: number;
+    /**
+     * How the number is written: currency, percent, compact notation, how many
+     * decimals. Passed to `Intl.NumberFormat`.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * The locale the number is written in. Defaults to `en-US` rather than the
+     * browser's, so a page rendered on a server writes the same thing the
+     * browser then does.
+     */
+    locales?: Intl.LocalesArgument;
+    /** How long a digit takes to roll, in milliseconds. */
+    duration?: number;
+}
+export declare function RollingNumber({ value, format, locales, duration, className, ...props }: RollingNumberProps): import("react").JSX.Element;
+export declare namespace RollingNumber {
+    var displayName: string;
+}

package/dist/components/rolling-number/index.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RollingNumber — a number whose digits roll to their new values.
+ *
+ * ```tsx
+ * <RollingNumber value={events} />
+ * <RollingNumber value={balance} format={{ style: 'currency', currency: 'USD' }} />
+ * ```
+ *
+ * Every digit is a column of ten, and the column is moved by a share of its
+ * own height. Nothing is measured: one hidden `0` in flow gives the column the
+ * width and the line box the font really has, and the ten digits stacked over
+ * it are each exactly that tall, so `translateY(-30%)` is the 3 whatever the
+ * type size turns out to be.
+ *
+ * That hidden `0` is also why the number sits on the text's baseline. A box
+ * that clips its overflow takes its bottom edge as its baseline, which would
+ * lift every digit above the words beside it. Here the clipping is done by an
+ * absolutely positioned window inside the column, and the column's baseline
+ * is still the `0`'s.
+ *
+ * The columns are keyed from the decimal point outwards. Going from 99 to 100
+ * adds a hundreds column rather than re-labelling the two that were there, so
+ * the nines roll to zeroes instead of being replaced by them.
+ */
+import { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
+const rollingNumberVariants = tv({
+    slots: {
+        // `tabular-nums` so a 1 is as wide as an 8 and the number does not change
+        // width, and shove whatever is beside it, while it rolls.
+        root: 'inline-flex items-baseline tabular-nums',
+        column: 'relative inline-block',
+        window: 'absolute inset-0 overflow-hidden',
+        strip: 'absolute inset-x-0 top-0 block h-[1000%] transition-transform ease-[cubic-bezier(0.2,0,0,1)] will-change-transform motion-reduce:transition-none',
+        digit: 'block h-[10%] text-center',
+    },
+});
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+/** Splits a formatted number into rolling digits and the characters around them. */
+function piecesOf(parts) {
+    // Whole digits are counted from the decimal point, so the units column is
+    // the same column whatever is in front of it.
+    let whole = parts.reduce((count, part) => (part.type === 'integer' ? count + part.value.length : count), 0);
+    let fraction = 0;
+    const pieces = [];
+    parts.forEach((part, index) => {
+        if (part.type === 'integer' || part.type === 'fraction') {
+            for (const character of part.value) {
+                const digit = character >= '0' && character <= '9' ? Number(character) : null;
+                const key = part.type === 'integer' ? `i${(whole -= 1)}` : `f${(fraction += 1)}`;
+                pieces.push({ key, digit, text: character });
+            }
+            return;
+        }
+        // A separator belongs to the digits on its right; anything else is keyed
+        // by what it is, so a currency sign survives the number growing a digit.
+        const key = part.type === 'group' ? `g${whole}` : `${part.type}${index}`;
+        pieces.push({ key, digit: null, text: part.value });
+    });
+    return pieces;
+}
+export function RollingNumber({ value, format, locales = 'en-US', duration = 600, className, ...props }) {
+    const slots = rollingNumberVariants();
+    // The options object is usually written inline, so it is new on every
+    // render. Its contents are what the formatter depends on.
+    const formatKey = JSON.stringify(format ?? null);
+    const formatter = useMemo(() => new Intl.NumberFormat(locales, format), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [locales, formatKey]);
+    const { label, pieces } = useMemo(() => {
+        const parts = formatter.formatToParts(value);
+        return { label: parts.map((part) => part.value).join(''), pieces: piecesOf(parts) };
+    }, [formatter, value]);
+    return (_jsxs("span", { className: slots.root({ className }), ...props, children: [_jsx("span", { className: "sr-only", children: label }), pieces.map((piece) => piece.digit === null ? (_jsx("span", { "aria-hidden": "true", children: piece.text }, piece.key)) : (_jsxs("span", { "aria-hidden": "true", className: slots.column(), children: [_jsx("span", { className: "invisible", children: "0" }), _jsx("span", { className: slots.window(), children: _jsx("span", { className: slots.strip(), style: {
+                                transform: `translateY(${-piece.digit * 10}%)`,
+                                transitionDuration: `${duration}ms`,
+                            }, children: DIGITS.map((digit) => (_jsx("span", { className: slots.digit(), children: digit }, digit))) }) })] }, piece.key)))] }));
+}
+RollingNumber.displayName = 'RollingNumber';