jbx 2.13.0 → 2.15.0

package/README.md

@@ -4,9 +4,11 @@ The little component toolkit behind the tools on [javier.xyz](https://javier.xyz
 components with a class each, one stylesheet, no runtime dependencies.
 
 ```
-npm i jbx
+pnpm add jbx
 ```
 
+React is a peer dependency (`17`, `18` or `19`), so it uses whichever copy you already have.
+
 ## Styles
 
 Either import the stylesheet and set your own accent color:
@@ -27,7 +29,14 @@ Or let the `JBX` component do both:
 <JBX accent="#f1c40f" />
 ```
 
-`JBX` has no hooks and no dependencies, so it renders inside a React server component too.
+`JBX` has no hooks and no dependencies, so it renders inside a React server component too. So does
+every component except `Input`, which holds the state behind `onValueChange` and is marked
+`'use client'`.
+
+Two more variables are worth knowing about. `--control-height` is how tall a `Button`, `Input` or
+`Range` stands on its own; `--control-height-compact` is what one shrinks to inside a `Tabs` row,
+where it matches the line box of the text beside it so the row is no taller than a row of plain
+tabs.
 
 ## Use
 
@@ -46,6 +55,32 @@ function App() {
 }
 ```
 
+## Components
+
+Layout: `Container`, `Inline`, `Stack`, `Box`, `Space`.
+
+Type: `MainHeader`, `HeaderH1`--`HeaderH4`, `Text`, `SmallText`, `A`, `Ul`, `Li`, `Bullet`, `HR`.
+
+Controls: `Button`, `Input`, `Range`, `Checkbox`, `Tabs` with `Tab`, `Dropzone`.
+
+Code: `CodeSnippet`, `CodeTextarea`.
+
+Plus `JBX` for the stylesheet, `MoreExperiments` for the footer that links the other tools, and
+`Component` and `space` for building your own.
+
+## Number inputs
+
+`Input` is a plain controlled input until you hand it `onValueChange`, which switches it to numbers
+and takes over the awkward part: it holds what was typed and only calls you back once that parses
+and lands inside `min`/`max`. A half typed value never reaches your state, so nothing downstream
+jumps around mid-keystroke, and blurring a field you left half typed restores the live value.
+
+```jsx
+<Input value={seconds} onValueChange={secondsSet} min={0.2} max={60} step="0.5" />
+```
+
+`value` and `onChange` on their own behave exactly as they always did.
+
 ## Spacing
 
 Everything is measured in units of `--size` (16px, 14px on smaller screens). `<Space h={2} />`,
@@ -69,9 +104,11 @@ const Sprite = Component(
 ## Develop
 
 ```
-npm run dev        # rebuild on change
-npm run typecheck
-npm test           # renders every export, fails on any React warning
+pnpm dev            # serve the interactive preview at localhost:3008/jbx
+pnpm dev:lib        # rebuild the published library on change
+pnpm preview:build  # make a production build of the preview
+pnpm typecheck
+pnpm test           # renders every export, fails on any React warning
 ```
 
 ## Publish
@@ -80,11 +117,11 @@ New versions are published to npm automatically when they reach `main`. A push w
 version is already on npm succeeds without publishing again.
 
 1. Add the release notes to `CHANGELOG.md`.
-2. Run `npm version minor --no-git-tag-version` to update `package.json`.
-3. Run `npm test`.
+2. Run `pnpm version minor --no-git-tag-version` to update `package.json`.
+3. Run `pnpm test`.
 4. Commit the changes and push them to `main`.
 5. Confirm the **Publish package** workflow succeeds, then check the version with
-   `npm view jbx version`.
+   `pnpm view jbx version`.
 
 Publishing uses npm trusted publishing through GitHub Actions. It does not require an
 npm token in the repository.

package/dist/components/Input.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+    value?: string | number | readonly string[];
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Opt in to number handling. `value` is a number, and this is called with a
+     * number -- but only once what was typed parses and lands inside `min`/`max`,
+     * so a half typed value stays on screen without ever reaching the caller.
+     * Implies `type="number"`.
+     */
+    onValueChange?: (value: number) => void;
+};
+/**
+ * A text input, and -- with `onValueChange` -- a number input that only commits
+ * what parses:
+ *
+ *   <Input value={seconds} onValueChange={secondsSet} min={0.2} max={60} />
+ *
+ * Without `onValueChange` this is a plain controlled input and the caller owns
+ * `value` and `onChange` as usual.
+ */
+export declare function Input({ value, onChange, onValueChange, onBlur, type, min, max, ...props }: InputProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC1F,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAMF;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,IAAI,EACJ,GAAG,EACH,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,qBA0DZ"}

package/dist/components/Input.js

@@ -0,0 +1,54 @@
+'use client';
+import React, { useState } from 'react';
+import { Component } from '../primitives.js';
+const InputBase = Component(`jbx-input`, {}, { element: 'input' });
+function toNumber(value) {
+    return typeof value === 'number' ? value : Number(value);
+}
+/**
+ * A text input, and -- with `onValueChange` -- a number input that only commits
+ * what parses:
+ *
+ *   <Input value={seconds} onValueChange={secondsSet} min={0.2} max={60} />
+ *
+ * Without `onValueChange` this is a plain controlled input and the caller owns
+ * `value` and `onChange` as usual.
+ */
+export function Input({ value, onChange, onValueChange, onBlur, type, min, max, ...props }) {
+    // Hooks run either way; only the returned tree branches.
+    const [draft, draftSet] = useState(() => String(value ?? ''));
+    const [lastValue, lastValueSet] = useState(value);
+    if (!onValueChange) {
+        return (React.createElement(InputBase, { ...props, type: type, min: min, max: max, value: value, onChange: onChange, onBlur: onBlur }));
+    }
+    if (value !== lastValue) {
+        lastValueSet(value);
+        // `2.50` parses to the value we already hold -- adopting `String(value)`
+        // here would eat the trailing zero out from under the caret mid-typing.
+        if (Number(draft) !== toNumber(value))
+            draftSet(String(value ?? ''));
+    }
+    function draftChange(event) {
+        const next = event.target.value;
+        draftSet(next);
+        onChange?.(event);
+        const parsed = Number(next);
+        if (next.trim() === '' || !Number.isFinite(parsed))
+            return;
+        if (min !== undefined && parsed < toNumber(min))
+            return;
+        if (max !== undefined && parsed > toNumber(max))
+            return;
+        onValueChange(parsed);
+    }
+    // Leaving a half typed value behind is how a field ends up showing something
+    // the rest of the page never agreed to. Snap back to the live value on the
+    // way out.
+    function draftBlur(event) {
+        if (Number(draft) !== toNumber(value))
+            draftSet(String(value ?? ''));
+        onBlur?.(event);
+    }
+    return (React.createElement(InputBase, { ...props, type: type ?? 'number', min: min, max: max, value: draft, onChange: draftChange, onBlur: draftBlur }));
+}
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,SAAS,GAAG,SAAS,CACzB,WAAW,EACX,EAAE,EACF,EAAE,OAAO,EAAE,OAAO,EAAE,CACrB,CAAC;AAcF,SAAS,QAAQ,CAAC,KAA0B;IAC1C,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC3D,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,IAAI,EACJ,GAAG,EACH,GAAG,EACH,GAAG,KAAK,EACG;IACX,yDAAyD;IACzD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;IAC9D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,yEAAyE;QACzE,wEAAwE;QACxE,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,KAAK,CAAC;YAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;IACvE,CAAC;IAED,SAAS,WAAW,CAAC,KAA0C;QAC7D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QAElB,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YAAE,OAAO;QAC3D,IAAI,GAAG,KAAK,SAAS,IAAI,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;YAAE,OAAO;QACxD,IAAI,GAAG,KAAK,SAAS,IAAI,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;YAAE,OAAO;QAExD,aAAc,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC;IAED,6EAA6E;IAC7E,2EAA2E;IAC3E,WAAW;IACX,SAAS,SAAS,CAAC,KAAyC;QAC1D,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,KAAK,CAAC;YAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;QACrE,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,IAAI,QAAQ,EACtB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,SAAS,GACjB,CACH,CAAC;AACJ,CAAC"}

package/dist/generated/css.d.ts

@@ -1,2 +1,2 @@
-export declare const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 17px;\n  --radius-small: 2px;\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fcfcfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings: 'wdth' 107, 'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: calc(var(--size) * 2.5);\n  transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '\u2197';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #ecf0f1;\n  z-index: -1;\n  transition: transform 0.2s, opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: 16px;\n}\na.jbx-a::before {\n  border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: calc(var(--size) * 2.5);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #bdc3c780;\n  height: var(--size);\n  border-radius: 0;\n  border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: 0;\n  border: none;\n  border-top: 2px solid #ecf0f1;\n}\n";
+export declare const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '\u2197';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #c0c0c080;\n  height: var(--size);\n  border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-track {\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/generated/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,unNAAknN,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,GAAG,ukRAAkkR,CAAC"}

package/dist/generated/css.js

@@ -1,3 +1,3 @@
 // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
-export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 17px;\n  --radius-small: 2px;\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fcfcfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings: 'wdth' 107, 'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: calc(var(--size) * 2.5);\n  transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #ecf0f1;\n  z-index: -1;\n  transition: transform 0.2s, opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: 16px;\n}\na.jbx-a::before {\n  border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: calc(var(--size) * 2.5);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #bdc3c780;\n  height: var(--size);\n  border-radius: 0;\n  border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: 0;\n  border: none;\n  border-top: 2px solid #ecf0f1;\n}\n";
+export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #c0c0c080;\n  height: var(--size);\n  border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-track {\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";
 //# sourceMappingURL=css.js.map

package/dist/generated/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,+mNAA+mN,CAAC"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/generated/css.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,GAAG,GAAG,+jRAA+jR,CAAC"}

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export * from './primitives.js';
 export { space } from './spacing.js';
 export { JBX } from './JBX.js';
 export { Box } from './components/Layout.js';
+export { Input } from './components/Input.js';
 export { MoreExperiments } from './components/MoreExperiments.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/index.js

@@ -2,5 +2,6 @@ export * from './primitives.js';
 export { space } from './spacing.js';
 export { JBX } from './JBX.js';
 export { Box } from './components/Layout.js';
+export { Input } from './components/Input.js';
 export { MoreExperiments } from './components/MoreExperiments.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/main.css

@@ -5,13 +5,24 @@ html {
 *:before,
 *:after {
   box-sizing: inherit;
+  corner-shape: squircle;
 }
 
 :root {
   --size: 16px;
   --font-size: 16px;
-  --font-size-small: 17px;
-  --radius-small: 2px;
+  --font-size-small: 15px;
+  --font-family-monospace:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  --radius-small: 1px;
+  --radius-big: 15px;
+  /* Every interactive control is this tall, so a button, an input and a range
+     standing next to each other line up. */
+  --control-height: calc(var(--size) * 2.5);
+  /* What a control shrinks to inside a tab row, where it has to match the line
+     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand
+     on its own -- a row holding one is then exactly as tall as one that doesn't. */
+  --control-height-compact: calc(var(--font-size) * 1.4);
 }
 
 @media screen and (max-width: 1200px) {
@@ -41,12 +52,13 @@ body {
 
 body,
 input,
-textarea {
+textarea,
+button {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
 }
 
 body {
-  background: #fcfcfd;
+  background: #fdfdfd;
   color: #000;
 }
 
@@ -61,7 +73,9 @@ h4 {
   color: var(--base-font-color-bright);
 }
 h1 {
-  font-variation-settings: 'wdth' 107, 'wght' 650;
+  font-variation-settings:
+    'wdth' 107,
+    'wght' 650;
   font-weight: 650;
 }
 
@@ -73,6 +87,7 @@ b {
 .jbx-main-h1 {
   display: inline-block;
   background-color: var(--accent-color);
+  border-radius: var(--radius-small);
   font-size: calc(var(--font-size) * 2);
   padding: 8px;
 }
@@ -102,15 +117,15 @@ body,
 }
 
 .jbx-code-snippet {
-  border-radius: var(--size);
-  font-family: monaco, monospace;
+  border-radius: var(--radius-small);
+  font-family: var(--font-family-monospace);
   border: none;
   width: 100%;
   font-size: calc(var(--size) - 3px);
   line-height: 1.33;
   padding: var(--size) calc(var(--size) * 1.2);
-  background: #ecf0f1;
-  color: #34495e;
+  background: #eee;
+  color: #444;
   resize: none;
 }
 .jbx-code-snippet:focus {
@@ -118,15 +133,15 @@ body,
 }
 
 .jbx-code-area {
-  border-radius: var(--size);
-  font-family: monaco, monospace;
+  border-radius: var(--radius-big);
+  font-family: var(--font-family-monospace);
   border: none;
   width: 100%;
   font-size: calc(var(--size) - 3px);
   line-height: 1.33;
   padding: var(--size) calc(var(--size) * 1.2);
-  background: #ecf0f1;
-  color: #34495e;
+  background: #eee;
+  color: #444;
   resize: none;
   min-height: 120px;
 }
@@ -145,14 +160,28 @@ body,
   box-shadow: 3px 3px 0 #ccc;
   padding: 0 calc(var(--size) / 2);
   border: none;
-  height: calc(var(--size) * 2.5);
-  transition: top 0.1s, left 0.1s, box-shadow 0.05s;
+  height: var(--control-height);
+  transition:
+    top 0.1s,
+    left 0.1s,
+    box-shadow 0.05s;
 }
 .jbx-button:active {
   top: 1px;
   left: 1px;
   box-shadow: 1px 1px 0 #ccc;
 }
+.jbx-button:disabled {
+  cursor: default;
+  color: #999;
+  background-color: #f4f4f4;
+  box-shadow: 1px 1px 0 #e0e0e0;
+}
+.jbx-button:disabled:active {
+  top: 0;
+  left: 0;
+  box-shadow: 1px 1px 0 #e0e0e0;
+}
 
 /* LINKS */
 .jbx-a {
@@ -169,7 +198,10 @@ body,
   position: relative;
   top: -1px;
   right: -1px;
-  transition: top 0.3s, right 0.3s, color 0.3s;
+  transition:
+    top 0.3s,
+    right 0.3s,
+    color 0.3s;
 }
 .jbx-a:hover,
 .jbx-block-link:hover .jbx-a {
@@ -195,9 +227,11 @@ a.jbx-a::before,
   content: '';
   display: block;
   position: absolute;
-  background-color: #ecf0f1;
+  background-color: #eee;
   z-index: -1;
-  transition: transform 0.2s, opacity 0.2s;
+  transition:
+    transform 0.2s,
+    opacity 0.2s;
   transform: scale(0.98) translatey(4px);
   opacity: 0;
   top: -4px;
@@ -206,10 +240,10 @@ a.jbx-a::before,
   bottom: -4px;
 }
 .jbx-block-link::before {
-  border-radius: 16px;
+  border-radius: var(--radius-small);
 }
 a.jbx-a::before {
-  border-radius: 8px;
+  border-radius: var(--radius-small);
 }
 a.jbx-a:hover::before,
 .jbx-block-link:hover::before {
@@ -255,6 +289,10 @@ a.jbx-a:hover::before,
   line-height: 1.4;
 }
 
+.jbx-tabs--tab {
+  border-radius: var(--radius-small);
+}
+
 .jbx-input {
   color: #777;
   -webkit-text-fill-color: #777;
@@ -264,10 +302,30 @@ a.jbx-a:hover::before,
   appearance: none;
   border: none;
   border-radius: var(--radius-small);
-  height: calc(var(--size) * 2.5);
+  height: var(--control-height);
   background-color: #eee;
   padding: 0 calc(var(--size) * 0.5);
-  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
+  box-shadow:
+    inset rgba(0, 0, 0, 0.04) 3px 3px 0,
+    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
+}
+
+/* Chrome hides the stepper until hover and takes its width out of the content
+   box, so the value slides sideways as the pointer enters. Keep it painted. */
+.jbx-input[type='number']::-webkit-inner-spin-button,
+.jbx-input[type='number']::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+/* A control inside a tab row sizes to the row, not to itself: it matches the
+   line box of the text beside it, so a row holding a field is exactly as tall
+   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,
+   which is right for a field that owns its row and wrong for one sitting
+   between two bits of text. */
+.jbx-tabs .jbx-input,
+.jbx-tabs .jbx-button {
+  flex: none;
+  height: var(--control-height-compact);
 }
 
 .jbx-dropzone {
@@ -280,6 +338,7 @@ a.jbx-a:hover::before,
   justify-content: center;
   flex-direction: column;
   border: 2px dashed #000;
+  border-radius: var(--radius-big);
   color: #000;
   padding: 0;
   cursor: pointer;
@@ -305,9 +364,8 @@ a.jbx-a:hover::before,
   flex: 1;
   width: 100%;
   appearance: none;
-  background-color: #bdc3c780;
+  background-color: #c0c0c080;
   height: var(--size);
-  border-radius: 0;
   border-radius: var(--radius-small);
 }
 
@@ -315,7 +373,6 @@ a.jbx-a:hover::before,
   -webkit-appearance: none;
   appearance: none;
   box-shadow: none;
-  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
@@ -325,7 +382,6 @@ a.jbx-a:hover::before,
 .jbx-range::-moz-range-thumb {
   appearance: none;
   box-shadow: none;
-  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
@@ -334,6 +390,12 @@ a.jbx-a:hover::before,
 }
 .jbx-range::-webkit-slider-runnable-track {
   appearance: none;
+  border-radius: var(--radius-small);
+}
+.jbx-range::-moz-range-track {
+  background-color: #c0c0c080;
+  border-radius: var(--radius-small);
+  height: var(--size);
 }
 .jbx-range:focus {
   outline: none;
@@ -363,7 +425,7 @@ a.jbx-a:hover::before,
 .jbx-hr {
   margin: calc(var(--size) * 2) auto;
   width: 38.2%;
-  border-radius: 0;
+  border-radius: var(--radius-small);
   border: none;
-  border-top: 2px solid #ecf0f1;
+  border-top: 2px solid #eee;
 }

package/dist/primitives.d.ts

@@ -33,10 +33,6 @@ export declare const Button: (props: React.ButtonHTMLAttributes<HTMLButtonElemen
     children?: ReactNode;
     style?: CSSProperties;
 }) => React.JSX.Element;
-export declare const Input: (props: React.InputHTMLAttributes<HTMLInputElement> & {
-    children?: ReactNode;
-    style?: CSSProperties;
-}) => React.JSX.Element;
 export declare const Range: (props: React.InputHTMLAttributes<HTMLInputElement> & {
     children?: ReactNode;
     style?: CSSProperties;

package/dist/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAA0D,YAAY,EAAE,MAAM,cAAc,CAAC;AAEpG,KAAK,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAErD,KAAK,eAAe,GAAG;IACrB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAChC,CAAC;AAEF,KAAK,WAAW,CAAC,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,aAAa,CAAC,CAAC;AAEpE,wBAAgB,SAAS,CAAC,CAAC,EACzB,SAAS,EAAE,MAAM,EACjB,QAAQ,GAAE,WAAW,CAAC,CAAC,CAAM,EAC7B,MAAM,GAAE,eAAoB,GAC3B,CAAC,KAAK,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CA8BnF;AAED,eAAO,MAAM,SAAS;eAhCM,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAgChB,CAAC;AAE9D,eAAO,MAAM,IAAI;eAlCW,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAkC1B,CAAC;AAEpD,eAAO,MAAM,SAAS;eApCM,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAoCf,CAAC;AAE/D,eAAO,MAAM,MAAM;eAtCS,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA0C5E,CAAC;AAEF,eAAO,MAAM,KAAK;eA5CU,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAgD5E,CAAC;AAEF,eAAO,MAAM,KAAK;eAlDU,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA2D5E,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAC7D,eAAO,MAAM,QAAQ;eA9DO,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA8DM,CAAC;AACpF,eAAO,MAAM,QAAQ;eA/DO,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA+DM,CAAC;AACpF,eAAO,MAAM,QAAQ;eAhEO,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAgEM,CAAC;AACpF,eAAO,MAAM,QAAQ;eAjEO,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAiEM,CAAC;AACpF,eAAO,MAAM,EAAE;eAlEa,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAkEoB,CAAC;AAElG,eAAO,MAAM,UAAU;eApEK,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAoEU,CAAC;AAExF,eAAO,MAAM,CAAC;UAAqE,MAAM;;eAtE7D,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA0E5E,CAAC;AAGF,eAAO,MAAM,KAAK;aADsB,OAAO;QAAM,MAAM;QAAM,MAAM;;eA5E3C,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAqF5E,CAAC;AAGF,eAAO,MAAM,MAAM;WADmC,OAAO;;eAvFjC,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA+F5E,CAAC;AAGF,eAAO,MAAM,KAAK;eAlGU,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAoG3E,CAAC;AAEH,eAAO,MAAM,QAAQ;eAtGO,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAsGlB,CAAC;AAE5D,eAAO,MAAM,EAAE;eAxGa,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA+G5E,CAAC;AAEF,eAAO,MAAM,EAAE;eAjHa,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAwH5E,CAAC;AAEF,eAAO,MAAM,IAAI;eA1HW,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA0H1B,CAAC;AAGpD,eAAO,MAAM,GAAG;WADoB,OAAO;aAAW,OAAO;;eA5HjC,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAwI5E,CAAC;AAEF,eAAO,MAAM,WAAW;eA1II,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OA8I5E,CAAC;AAEF,eAAO,MAAM,YAAY;eAhJG,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAoJ5E,CAAC;AAEF,eAAO,MAAM,cAAc;gBAAsC,OAAO;;eAtJ5C,SAAS;YAAU,aAAa;MAAO,KAAK,CAAC,GAAG,CAAC,OAqK5E,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,qBAuCA;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBAMlD"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/primitives.js

@@ -20,7 +20,6 @@ export const Container = Component(`jbx-container`);
 export const Text = Component(`jbx-text`);
 export const SmallText = Component(`jbx-small-text`);
 export const Button = Component(`jbx-button`, {}, { element: 'button' });
-export const Input = Component(`jbx-input`, {}, { element: 'input' });
 export const Range = Component(`jbx-range`, {}, {
     element: 'input',
     props: {
@@ -57,9 +56,10 @@ export const Li = Component(`jbx-li`, {
 }, { element: 'li' });
 export const Tabs = Component(`jbx-tabs`);
 export const Tab = Component(`jbx-tabs--tab`, ({ info, active }) => ({
+    borderRadius: BASE_RADIUS,
     userSelect: 'none',
     cursor: 'pointer',
-    backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',
+    backgroundColor: active ? '#000' : info ? '#fff' : '#eee',
     color: active ? '#fff' : '#000',
     padding: space(0.5),
     paddingLeft: info ? 0 : space(0.5)

package/dist/primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/spacing.d.ts

@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
  * the stylesheet does.
  */
 export declare function space(n: number): string;
-export declare const BASE_RADIUS = "calc(var(--size) / 3)";
+export declare const BASE_RADIUS = "var(--radius-small)";
 export type SpacingProps = {
     /** Vertical margin, in spacing units. */
     v?: number;
@@ -17,6 +17,6 @@ export type SpacingProps = {
     padding?: number | number[];
 };
 /** Keys `spacingPropsToStyle` consumes, so they can be kept off the DOM. */
-export declare const SPACING_PROPS: readonly ["v", "h", "gap", "padding"];
+export declare const SPACING_PROPS: readonly ['v', 'h', 'gap', 'padding'];
 export declare function spacingPropsToStyle({ v, h, gap, padding }: SpacingProps): CSSProperties;
 //# sourceMappingURL=spacing.d.ts.map

package/dist/spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvC;AAED,eAAO,MAAM,WAAW,0BAA0B,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,yCAAyC;IACzC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,uCAAwC,CAAC;AAEnE,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,YAAY,GAAG,aAAa,CAevF"}
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvC;AAED,eAAO,MAAM,WAAW,wBAAwB,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG;IACzB,yCAAyC;IACzC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,YAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,YAAY,GAAG,aAAa,CAevF"}

package/dist/spacing.js

@@ -6,7 +6,7 @@
 export function space(n) {
     return `calc(var(--size) * ${n})`;
 }
-export const BASE_RADIUS = `calc(var(--size) / 3)`;
+export const BASE_RADIUS = `var(--radius-small)`;
 /** Keys `spacingPropsToStyle` consumes, so they can be kept off the DOM. */
 export const SPACING_PROPS = ['v', 'h', 'gap', 'padding'];
 export function spacingPropsToStyle({ v, h, gap, padding }) {

package/dist/spacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.js","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,KAAK,CAAC,CAAS;IAC7B,OAAO,sBAAsB,CAAC,GAAG,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;AAanD,4EAA4E;AAC5E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,MAAM,UAAU,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAgB;IACtE,OAAO;QACL,UAAU,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,WAAW,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,YAAY,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;QAC/C,OAAO,EACL,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,CAAC,OAAO,CAAC;iBACN,IAAI,EAAE;iBACN,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;iBAC5B,IAAI,CAAC,GAAG,CAAC;KACnB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"spacing.js","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,KAAK,CAAC,CAAS;IAC7B,OAAO,sBAAsB,CAAC,GAAG,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,qBAAqB,CAAC;AAajD,4EAA4E;AAC5E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAEnE,MAAM,UAAU,mBAAmB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAgB;IACtE,OAAO;QACL,UAAU,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,WAAW,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,YAAY,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;QAC/C,OAAO,EACL,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,CAAC,OAAO,CAAC;iBACN,IAAI,EAAE;iBACN,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;iBAC5B,IAAI,CAAC,GAAG,CAAC;KACnB,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "jbx",
-  "version": "2.13.0",
+  "version": "2.15.0",
+  "description": "The little component toolkit behind the tools on javier.xyz. Plain components with a class each, one stylesheet, no runtime dependencies.",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "css",
+    "design-system"
+  ],
+  "packageManager": "pnpm@11.21.0",
   "author": "hi@javier.xyz",
   "license": "Unlicensed",
+  "homepage": "https://github.com/javierbyte/jbx#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/javierbyte/jbx.git"
+    "url": "git+https://github.com/javierbyte/jbx.git"
+  },
+  "bugs": {
+    "url": "https://github.com/javierbyte/jbx/issues"
   },
   "type": "module",
   "sideEffects": [
@@ -32,24 +45,29 @@
   },
   "scripts": {
     "css": "node ./scripts/build-css.mjs",
-    "prebuild": "npm run css",
+    "prebuild": "pnpm run css",
     "build": "tsc -p tsconfig.build.json",
-    "dev": "npm run css && tsc -p tsconfig.build.json --watch",
-    "pretypecheck": "npm run css",
+    "dev": "pnpm run css && next dev --webpack -p 3008",
+    "dev:lib": "pnpm run css && tsc -p tsconfig.build.json --watch",
+    "preview:build": "pnpm run css && next build --webpack",
+    "pretypecheck": "pnpm run css",
     "typecheck": "tsc --noEmit",
-    "pretest": "npm run build",
+    "pretest": "pnpm run build",
     "test": "node ./scripts/smoke.mjs",
-    "prepublishOnly": "npm run typecheck && npm test"
+    "prepublishOnly": "pnpm run typecheck && pnpm test"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19"
   },
   "devDependencies": {
+    "@next/third-parties": "^16.3.2",
+    "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.3",
+    "@types/react-dom": "^19.2.4",
+    "next": "^16.3.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "typescript": "^5.9.3"
+    "typescript": "^7.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Input.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Component } from '../primitives.js';
+
+const InputBase = Component<React.InputHTMLAttributes<HTMLInputElement>>(
+  `jbx-input`,
+  {},
+  { element: 'input' }
+);
+
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+  value?: string | number | readonly string[];
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  /**
+   * Opt in to number handling. `value` is a number, and this is called with a
+   * number -- but only once what was typed parses and lands inside `min`/`max`,
+   * so a half typed value stays on screen without ever reaching the caller.
+   * Implies `type="number"`.
+   */
+  onValueChange?: (value: number) => void;
+};
+
+function toNumber(value: InputProps['value']): number {
+  return typeof value === 'number' ? value : Number(value);
+}
+
+/**
+ * A text input, and -- with `onValueChange` -- a number input that only commits
+ * what parses:
+ *
+ *   <Input value={seconds} onValueChange={secondsSet} min={0.2} max={60} />
+ *
+ * Without `onValueChange` this is a plain controlled input and the caller owns
+ * `value` and `onChange` as usual.
+ */
+export function Input({
+  value,
+  onChange,
+  onValueChange,
+  onBlur,
+  type,
+  min,
+  max,
+  ...props
+}: InputProps) {
+  // Hooks run either way; only the returned tree branches.
+  const [draft, draftSet] = useState(() => String(value ?? ''));
+  const [lastValue, lastValueSet] = useState(value);
+
+  if (!onValueChange) {
+    return (
+      <InputBase
+        {...props}
+        type={type}
+        min={min}
+        max={max}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+      />
+    );
+  }
+
+  if (value !== lastValue) {
+    lastValueSet(value);
+    // `2.50` parses to the value we already hold -- adopting `String(value)`
+    // here would eat the trailing zero out from under the caret mid-typing.
+    if (Number(draft) !== toNumber(value)) draftSet(String(value ?? ''));
+  }
+
+  function draftChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const next = event.target.value;
+    draftSet(next);
+    onChange?.(event);
+
+    const parsed = Number(next);
+    if (next.trim() === '' || !Number.isFinite(parsed)) return;
+    if (min !== undefined && parsed < toNumber(min)) return;
+    if (max !== undefined && parsed > toNumber(max)) return;
+
+    onValueChange!(parsed);
+  }
+
+  // Leaving a half typed value behind is how a field ends up showing something
+  // the rest of the page never agreed to. Snap back to the live value on the
+  // way out.
+  function draftBlur(event: React.FocusEvent<HTMLInputElement>) {
+    if (Number(draft) !== toNumber(value)) draftSet(String(value ?? ''));
+    onBlur?.(event);
+  }
+
+  return (
+    <InputBase
+      {...props}
+      type={type ?? 'number'}
+      min={min}
+      max={max}
+      value={draft}
+      onChange={draftChange}
+      onBlur={draftBlur}
+    />
+  );
+}

package/src/generated/css.ts

@@ -1,2 +1,2 @@
 // Generated by scripts/build-css.mjs from src/style.css. Do not edit.
-export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 17px;\n  --radius-small: 2px;\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fcfcfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings: 'wdth' 107, 'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--size);\n  font-family: monaco, monospace;\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #ecf0f1;\n  color: #34495e;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: calc(var(--size) * 2.5);\n  transition: top 0.1s, left 0.1s, box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition: top 0.3s, right 0.3s, color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #ecf0f1;\n  z-index: -1;\n  transition: transform 0.2s, opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: 16px;\n}\na.jbx-a::before {\n  border-radius: 8px;\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: calc(var(--size) * 2.5);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #bdc3c780;\n  height: var(--size);\n  border-radius: 0;\n  border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: 0;\n  border: none;\n  border-top: 2px solid #ecf0f1;\n}\n";
+export const CSS = "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n  corner-shape: squircle;\n}\n\n:root {\n  --size: 16px;\n  --font-size: 16px;\n  --font-size-small: 15px;\n  --font-family-monospace:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  --radius-small: 1px;\n  --radius-big: 15px;\n  /* Every interactive control is this tall, so a button, an input and a range\n     standing next to each other line up. */\n  --control-height: calc(var(--size) * 2.5);\n  /* What a control shrinks to inside a tab row, where it has to match the line\n     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand\n     on its own -- a row holding one is then exactly as tall as one that doesn't. */\n  --control-height-compact: calc(var(--font-size) * 1.4);\n}\n\n@media screen and (max-width: 1200px) {\n  :root {\n    --font-size: 18px;\n    --font-size-small: 16px;\n    --size: 14px;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --font-size: 16px;\n    --font-size-small: 14px;\n  }\n}\n\n* {\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\nbody {\n  touch-action: pan-y;\n}\n\nbody,\ninput,\ntextarea,\nbutton {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\nbody {\n  background: #fdfdfd;\n  color: #000;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  line-height: 1;\n  padding: 0;\n  font-variation-settings: 'wght' 600;\n  font-weight: 600;\n  color: var(--base-font-color-bright);\n}\nh1 {\n  font-variation-settings:\n    'wdth' 107,\n    'wght' 650;\n  font-weight: 650;\n}\n\nstrong,\nb {\n  font-weight: 500;\n}\n\n.jbx-main-h1 {\n  display: inline-block;\n  background-color: var(--accent-color);\n  border-radius: var(--radius-small);\n  font-size: calc(var(--font-size) * 2);\n  padding: 8px;\n}\n\n.jbx-h1 {\n  font-size: calc(var(--font-size) * 2);\n  font-weight: 700;\n}\n.jbx-h2 {\n  font-size: calc(var(--font-size) * 1.25);\n}\n.jbx-h3 {\n  font-size: calc(var(--font-size) * 1.125);\n}\n.jbx-h4 {\n  font-size: var(--font-size-small);\n  text-transform: uppercase;\n}\n\n/* base text */\nhtml,\nbody,\n.jbx-button,\n.jbx-input {\n  font-size: var(--font-size);\n  line-height: 1;\n}\n\n.jbx-code-snippet {\n  border-radius: var(--radius-small);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n}\n.jbx-code-snippet:focus {\n  outline: none;\n}\n\n.jbx-code-area {\n  border-radius: var(--radius-big);\n  font-family: var(--font-family-monospace);\n  border: none;\n  width: 100%;\n  font-size: calc(var(--size) - 3px);\n  line-height: 1.33;\n  padding: var(--size) calc(var(--size) * 1.2);\n  background: #eee;\n  color: #444;\n  resize: none;\n  min-height: 120px;\n}\n.jbx-code-area:focus {\n  outline: none;\n}\n\n.jbx-button {\n  color: #000;\n  border-radius: var(--radius-small);\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-block;\n  background-color: #eee;\n  box-shadow: 3px 3px 0 #ccc;\n  padding: 0 calc(var(--size) / 2);\n  border: none;\n  height: var(--control-height);\n  transition:\n    top 0.1s,\n    left 0.1s,\n    box-shadow 0.05s;\n}\n.jbx-button:active {\n  top: 1px;\n  left: 1px;\n  box-shadow: 1px 1px 0 #ccc;\n}\n.jbx-button:disabled {\n  cursor: default;\n  color: #999;\n  background-color: #f4f4f4;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n.jbx-button:disabled:active {\n  top: 0;\n  left: 0;\n  box-shadow: 1px 1px 0 #e0e0e0;\n}\n\n/* LINKS */\n.jbx-a {\n  cursor: pointer;\n  color: #000;\n  box-shadow: #0002 0 2px 0;\n  font-weight: 500;\n  text-decoration: none;\n}\n.jbx-a::after {\n  content: '↗';\n  color: #0004;\n  font-size: var(--font-size-small);\n  position: relative;\n  top: -1px;\n  right: -1px;\n  transition:\n    top 0.3s,\n    right 0.3s,\n    color 0.3s;\n}\n.jbx-a:hover,\n.jbx-block-link:hover .jbx-a {\n  box-shadow: var(--accent-color) 0 2px 0;\n}\n.jbx-a:hover::after,\n.jbx-block-link:hover .jbx-a::after {\n  top: -3px;\n  right: -3px;\n  color: var(--accent-color);\n}\n\n.jbx-block-link {\n  min-width: 300px;\n  flex: 1;\n  text-decoration: none;\n  color: #000;\n  display: inline-block;\n  padding: var(--size);\n}\na.jbx-a::before,\n.jbx-block-link::before {\n  content: '';\n  display: block;\n  position: absolute;\n  background-color: #eee;\n  z-index: -1;\n  transition:\n    transform 0.2s,\n    opacity 0.2s;\n  transform: scale(0.98) translatey(4px);\n  opacity: 0;\n  top: -4px;\n  left: -6px;\n  right: -6px;\n  bottom: -4px;\n}\n.jbx-block-link::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a::before {\n  border-radius: var(--radius-small);\n}\na.jbx-a:hover::before,\n.jbx-block-link:hover::before {\n  transform: scale(1) translatey(0);\n  opacity: 1;\n}\n\n.jbx-a {\n  display: inline-block;\n}\n\n/* /LINKS */\n\n.jbx-small-text {\n  font-size: var(--font-size-small);\n}\n\n.jbx-container {\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);\n}\n\n.jbx-box {\n  flex: 1;\n}\n\n.jbx-inline {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n}\n\n.jbx-stack {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n}\n\n.jbx-text {\n  line-height: 1.4;\n}\n\n.jbx-tabs--tab {\n  border-radius: var(--radius-small);\n}\n\n.jbx-input {\n  color: #777;\n  -webkit-text-fill-color: #777;\n  opacity: 1;\n  flex: 1;\n  display: block;\n  appearance: none;\n  border: none;\n  border-radius: var(--radius-small);\n  height: var(--control-height);\n  background-color: #eee;\n  padding: 0 calc(var(--size) * 0.5);\n  box-shadow:\n    inset rgba(0, 0, 0, 0.04) 3px 3px 0,\n    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;\n}\n\n/* Chrome hides the stepper until hover and takes its width out of the content\n   box, so the value slides sideways as the pointer enters. Keep it painted. */\n.jbx-input[type='number']::-webkit-inner-spin-button,\n.jbx-input[type='number']::-webkit-outer-spin-button {\n  opacity: 1;\n}\n\n/* A control inside a tab row sizes to the row, not to itself: it matches the\n   line box of the text beside it, so a row holding a field is exactly as tall\n   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,\n   which is right for a field that owns its row and wrong for one sitting\n   between two bits of text. */\n.jbx-tabs .jbx-input,\n.jbx-tabs .jbx-button {\n  flex: none;\n  height: var(--control-height-compact);\n}\n\n.jbx-dropzone {\n  height: 120px;\n  flex: 1;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  flex-direction: column;\n  border: 2px dashed #000;\n  border-radius: var(--radius-big);\n  color: #000;\n  padding: 0;\n  cursor: pointer;\n}\n.jbx-dropzone:hover {\n  border-color: #999;\n}\n.jbx-dropzone span {\n  width: 100%;\n  cursor: pointer;\n}\n.jbx-dropzone input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.jbx-range {\n  flex: 1;\n  width: 100%;\n  appearance: none;\n  background-color: #c0c0c080;\n  height: var(--size);\n  border-radius: var(--radius-small);\n}\n\n.jbx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-thumb {\n  appearance: none;\n  box-shadow: none;\n  height: calc(var(--size) * 2);\n  width: var(--size);\n  background-color: #000;\n  border: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-webkit-slider-runnable-track {\n  appearance: none;\n  border-radius: var(--radius-small);\n}\n.jbx-range::-moz-range-track {\n  background-color: #c0c0c080;\n  border-radius: var(--radius-small);\n  height: var(--size);\n}\n.jbx-range:focus {\n  outline: none;\n}\n\n.jbx-bullet-container {\n  display: inline-block;\n  margin: -8px 4px -8px 0;\n}\n\n.jbx-bullet {\n  border: 1px solid #0001;\n  color: #000;\n  background-color: #0001;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(var(--font-size-small) - 3px);\n  height: calc(var(--size) * 1.25);\n  width: calc(var(--size) * 1.25);\n  border-radius: 100%;\n  top: -2px;\n  margin-right: 2px;\n}\n\n.jbx-hr {\n  margin: calc(var(--size) * 2) auto;\n  width: 38.2%;\n  border-radius: var(--radius-small);\n  border: none;\n  border-top: 2px solid #eee;\n}\n";

package/src/index.tsx

@@ -3,4 +3,5 @@ export * from './primitives.js';
 export { space } from './spacing.js';
 export { JBX } from './JBX.js';
 export { Box } from './components/Layout.js';
+export { Input } from './components/Input.js';
 export { MoreExperiments } from './components/MoreExperiments.js';

package/src/primitives.tsx

@@ -65,12 +65,6 @@ export const Button = Component<React.ButtonHTMLAttributes<HTMLButtonElement>>(
   { element: 'button' }
 );
 
-export const Input = Component<React.InputHTMLAttributes<HTMLInputElement>>(
-  `jbx-input`,
-  {},
-  { element: 'input' }
-);
-
 export const Range = Component<React.InputHTMLAttributes<HTMLInputElement>>(
   `jbx-range`,
   {},
@@ -149,9 +143,10 @@ type TabProps = DivProps & { info?: boolean; active?: boolean };
 export const Tab = Component<TabProps>(
   `jbx-tabs--tab`,
   ({ info, active }) => ({
+    borderRadius: BASE_RADIUS,
     userSelect: 'none',
     cursor: 'pointer',
-    backgroundColor: active ? '#000' : info ? '#fff' : '#ecf0f1',
+    backgroundColor: active ? '#000' : info ? '#fff' : '#eee',
     color: active ? '#fff' : '#000',
     padding: space(0.5),
     paddingLeft: info ? 0 : space(0.5)
@@ -244,4 +239,3 @@ export function Bullet({ value }: { value: number }) {
     </div>
   );
 }
-

package/src/spacing.ts

@@ -9,7 +9,7 @@ export function space(n: number): string {
   return `calc(var(--size) * ${n})`;
 }
 
-export const BASE_RADIUS = `calc(var(--size) / 3)`;
+export const BASE_RADIUS = `var(--radius-small)`;
 
 export type SpacingProps = {
   /** Vertical margin, in spacing units. */

package/src/style.css

@@ -5,13 +5,24 @@ html {
 *:before,
 *:after {
   box-sizing: inherit;
+  corner-shape: squircle;
 }
 
 :root {
   --size: 16px;
   --font-size: 16px;
-  --font-size-small: 17px;
-  --radius-small: 2px;
+  --font-size-small: 15px;
+  --font-family-monospace:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  --radius-small: 1px;
+  --radius-big: 15px;
+  /* Every interactive control is this tall, so a button, an input and a range
+     standing next to each other line up. */
+  --control-height: calc(var(--size) * 2.5);
+  /* What a control shrinks to inside a tab row, where it has to match the line
+     box of the tab's text (`.jbx-text` is `line-height: 1.4`) rather than stand
+     on its own -- a row holding one is then exactly as tall as one that doesn't. */
+  --control-height-compact: calc(var(--font-size) * 1.4);
 }
 
 @media screen and (max-width: 1200px) {
@@ -41,12 +52,13 @@ body {
 
 body,
 input,
-textarea {
+textarea,
+button {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
 }
 
 body {
-  background: #fcfcfd;
+  background: #fdfdfd;
   color: #000;
 }
 
@@ -61,7 +73,9 @@ h4 {
   color: var(--base-font-color-bright);
 }
 h1 {
-  font-variation-settings: 'wdth' 107, 'wght' 650;
+  font-variation-settings:
+    'wdth' 107,
+    'wght' 650;
   font-weight: 650;
 }
 
@@ -73,6 +87,7 @@ b {
 .jbx-main-h1 {
   display: inline-block;
   background-color: var(--accent-color);
+  border-radius: var(--radius-small);
   font-size: calc(var(--font-size) * 2);
   padding: 8px;
 }
@@ -102,15 +117,15 @@ body,
 }
 
 .jbx-code-snippet {
-  border-radius: var(--size);
-  font-family: monaco, monospace;
+  border-radius: var(--radius-small);
+  font-family: var(--font-family-monospace);
   border: none;
   width: 100%;
   font-size: calc(var(--size) - 3px);
   line-height: 1.33;
   padding: var(--size) calc(var(--size) * 1.2);
-  background: #ecf0f1;
-  color: #34495e;
+  background: #eee;
+  color: #444;
   resize: none;
 }
 .jbx-code-snippet:focus {
@@ -118,15 +133,15 @@ body,
 }
 
 .jbx-code-area {
-  border-radius: var(--size);
-  font-family: monaco, monospace;
+  border-radius: var(--radius-big);
+  font-family: var(--font-family-monospace);
   border: none;
   width: 100%;
   font-size: calc(var(--size) - 3px);
   line-height: 1.33;
   padding: var(--size) calc(var(--size) * 1.2);
-  background: #ecf0f1;
-  color: #34495e;
+  background: #eee;
+  color: #444;
   resize: none;
   min-height: 120px;
 }
@@ -145,14 +160,28 @@ body,
   box-shadow: 3px 3px 0 #ccc;
   padding: 0 calc(var(--size) / 2);
   border: none;
-  height: calc(var(--size) * 2.5);
-  transition: top 0.1s, left 0.1s, box-shadow 0.05s;
+  height: var(--control-height);
+  transition:
+    top 0.1s,
+    left 0.1s,
+    box-shadow 0.05s;
 }
 .jbx-button:active {
   top: 1px;
   left: 1px;
   box-shadow: 1px 1px 0 #ccc;
 }
+.jbx-button:disabled {
+  cursor: default;
+  color: #999;
+  background-color: #f4f4f4;
+  box-shadow: 1px 1px 0 #e0e0e0;
+}
+.jbx-button:disabled:active {
+  top: 0;
+  left: 0;
+  box-shadow: 1px 1px 0 #e0e0e0;
+}
 
 /* LINKS */
 .jbx-a {
@@ -169,7 +198,10 @@ body,
   position: relative;
   top: -1px;
   right: -1px;
-  transition: top 0.3s, right 0.3s, color 0.3s;
+  transition:
+    top 0.3s,
+    right 0.3s,
+    color 0.3s;
 }
 .jbx-a:hover,
 .jbx-block-link:hover .jbx-a {
@@ -195,9 +227,11 @@ a.jbx-a::before,
   content: '';
   display: block;
   position: absolute;
-  background-color: #ecf0f1;
+  background-color: #eee;
   z-index: -1;
-  transition: transform 0.2s, opacity 0.2s;
+  transition:
+    transform 0.2s,
+    opacity 0.2s;
   transform: scale(0.98) translatey(4px);
   opacity: 0;
   top: -4px;
@@ -206,10 +240,10 @@ a.jbx-a::before,
   bottom: -4px;
 }
 .jbx-block-link::before {
-  border-radius: 16px;
+  border-radius: var(--radius-small);
 }
 a.jbx-a::before {
-  border-radius: 8px;
+  border-radius: var(--radius-small);
 }
 a.jbx-a:hover::before,
 .jbx-block-link:hover::before {
@@ -255,6 +289,10 @@ a.jbx-a:hover::before,
   line-height: 1.4;
 }
 
+.jbx-tabs--tab {
+  border-radius: var(--radius-small);
+}
+
 .jbx-input {
   color: #777;
   -webkit-text-fill-color: #777;
@@ -264,10 +302,30 @@ a.jbx-a:hover::before,
   appearance: none;
   border: none;
   border-radius: var(--radius-small);
-  height: calc(var(--size) * 2.5);
+  height: var(--control-height);
   background-color: #eee;
   padding: 0 calc(var(--size) * 0.5);
-  box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
+  box-shadow:
+    inset rgba(0, 0, 0, 0.04) 3px 3px 0,
+    inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
+}
+
+/* Chrome hides the stepper until hover and takes its width out of the content
+   box, so the value slides sideways as the pointer enters. Keep it painted. */
+.jbx-input[type='number']::-webkit-inner-spin-button,
+.jbx-input[type='number']::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+/* A control inside a tab row sizes to the row, not to itself: it matches the
+   line box of the text beside it, so a row holding a field is exactly as tall
+   as one that only holds tabs. `flex: none` because `.jbx-input` stretches,
+   which is right for a field that owns its row and wrong for one sitting
+   between two bits of text. */
+.jbx-tabs .jbx-input,
+.jbx-tabs .jbx-button {
+  flex: none;
+  height: var(--control-height-compact);
 }
 
 .jbx-dropzone {
@@ -280,6 +338,7 @@ a.jbx-a:hover::before,
   justify-content: center;
   flex-direction: column;
   border: 2px dashed #000;
+  border-radius: var(--radius-big);
   color: #000;
   padding: 0;
   cursor: pointer;
@@ -305,9 +364,8 @@ a.jbx-a:hover::before,
   flex: 1;
   width: 100%;
   appearance: none;
-  background-color: #bdc3c780;
+  background-color: #c0c0c080;
   height: var(--size);
-  border-radius: 0;
   border-radius: var(--radius-small);
 }
 
@@ -315,7 +373,6 @@ a.jbx-a:hover::before,
   -webkit-appearance: none;
   appearance: none;
   box-shadow: none;
-  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
@@ -325,7 +382,6 @@ a.jbx-a:hover::before,
 .jbx-range::-moz-range-thumb {
   appearance: none;
   box-shadow: none;
-  border-radius: 0;
   height: calc(var(--size) * 2);
   width: var(--size);
   background-color: #000;
@@ -334,6 +390,12 @@ a.jbx-a:hover::before,
 }
 .jbx-range::-webkit-slider-runnable-track {
   appearance: none;
+  border-radius: var(--radius-small);
+}
+.jbx-range::-moz-range-track {
+  background-color: #c0c0c080;
+  border-radius: var(--radius-small);
+  height: var(--size);
 }
 .jbx-range:focus {
   outline: none;
@@ -363,7 +425,7 @@ a.jbx-a:hover::before,
 .jbx-hr {
   margin: calc(var(--size) * 2) auto;
   width: 38.2%;
-  border-radius: 0;
+  border-radius: var(--radius-small);
   border: none;
-  border-top: 2px solid #ecf0f1;
+  border-top: 2px solid #eee;
 }