@enigmax/primitives 0.24.0 → 0.25.0

package/dist/{chunk-QJJ34E4G.js → chunk-3MGBZOAU.js}

@@ -1,4 +1,4 @@
-import { writeValue } from './chunk-S7EE57YB.js';
+import { writeValue, ColorSwatch } from './chunk-KVLSOQTI.js';
 import { INPUT_ICON_PATHS } from './chunk-F25CGNQC.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { lazy, forwardRef, useRef, useState, useId, useCallback, useEffect, Suspense } from 'react';
@@ -25,7 +25,7 @@ var COLOR_FIELD_PROPS = {
 };
 var PasswordExtras = lazy(() => import('./password-3DRQYAYQ.js').then((module) => ({ default: module.PasswordExtras })));
 var SearchExtras = lazy(() => import('./search-PBZORZ7P.js').then((module) => ({ default: module.SearchExtras })));
-var ColorExtras = lazy(() => import('./color-OPV3BJV6.js').then((module) => ({ default: module.ColorExtras })));
+var ColorExtras = lazy(() => import('./color-T63FLJNH.js').then((module) => ({ default: module.ColorExtras })));
 var Input = forwardRef(function Input2(props, forwardedRef) {
   const {
     reveal,
@@ -71,6 +71,7 @@ var Input = forwardRef(function Input2(props, forwardedRef) {
   const innerRef = useRef(null);
   const [element, setElement] = useState(null);
   const [revealed, setRevealed] = useState(false);
+  const [colorWanted, setColorWanted] = useState(false);
   const describedBy = useId();
   const isPassword = type === "password";
   const isSearch = type === "search";
@@ -200,21 +201,37 @@ var Input = forwardRef(function Input2(props, forwardedRef) {
       "data-score": score ?? void 0,
       children: [
         /* @__PURE__ */ jsxs("div", { ...fieldProps, "data-enigma-input-field": "", children: [
-          isColor && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-            ColorExtras,
+          isColor && /* @__PURE__ */ jsx(
+            Suspense,
             {
-              input: element,
-              value,
-              format,
-              alpha,
-              swatches,
-              eyedropper,
-              placement,
-              styles,
-              locked,
-              labels: colorLabels
+              fallback: /* @__PURE__ */ jsx(
+                ColorSwatch,
+                {
+                  value,
+                  locked,
+                  baseline: styles !== false,
+                  label: colorLabels?.open ?? "Pick a colour",
+                  onPress: () => setColorWanted(true)
+                }
+              ),
+              children: /* @__PURE__ */ jsx(
+                ColorExtras,
+                {
+                  openOnMount: colorWanted,
+                  input: element,
+                  value,
+                  format,
+                  alpha,
+                  swatches,
+                  eyedropper,
+                  placement,
+                  styles,
+                  locked,
+                  labels: colorLabels
+                }
+              )
             }
-          ) }),
+          ),
           position === "start" && buttons,
           /* @__PURE__ */ jsx(
             "input",

package/dist/chunk-KVLSOQTI.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/react/input/color-swatch.tsx
+var BASELINE = {
+  display: "block",
+  boxSizing: "border-box",
+  width: "1.25rem",
+  height: "1.25rem",
+  padding: 0,
+  background: "none",
+  border: "1px solid var(--enigma-color-border, #404040)",
+  borderRadius: "0.3125rem",
+  overflow: "hidden",
+  cursor: "pointer"
+};
+function ColorSwatch({ value, open = false, invalid = false, locked = false, label, anchorRef, buttonRef, onPress, baseline = false, children }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: anchorRef,
+      "data-enigma-color": "",
+      "data-open": open ? "" : void 0,
+      style: baseline ? { position: "relative", display: "inline-flex", flex: "none" } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: buttonRef,
+            type: "button",
+            "data-enigma-color-swatch": "",
+            "data-enigma-color-checkers": "",
+            "data-invalid": invalid ? "" : void 0,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-label": label,
+            title: label,
+            disabled: locked,
+            style: baseline ? BASELINE : void 0,
+            onClick: onPress,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-enigma-color-fill": "",
+                style: {
+                  background: invalid ? void 0 : value,
+                  ...baseline ? { display: "block", width: "100%", height: "100%" } : null
+                }
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/react/input/write-value.ts
+function writeValue(input, next) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (setter) setter.call(input, next);
+  else input.value = next;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+export { ColorSwatch, writeValue };

package/dist/{color-OPV3BJV6.js → color-T63FLJNH.js}

@@ -1,7 +1,7 @@
 import { parseColor, rgbToHsv, colorEquals, hsvToRgb, formatColor, toHex } from './chunk-S2FPN5ID.js';
-import { writeValue } from './chunk-S7EE57YB.js';
+import { writeValue, ColorSwatch } from './chunk-KVLSOQTI.js';
 import { useLayoutEffect, useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/react/input/color-styles.ts
 var COLOR_STYLES = `
@@ -133,6 +133,26 @@ var COLOR_STYLES = `
 [data-enigma-color-eyedropper]:hover { color: var(--enigma-color-text); }
 [data-enigma-color-eyedropper]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
 
+/* The value as text, with the notation beside it. Monospace on purpose: a hex whose digits
+   shift width as you drag is a value nobody can read at a glance. */
+[data-enigma-color-value] { display: flex; align-items: center; gap: 0.375rem; }
+[data-enigma-color-format] {
+    flex: none; padding: 0.3125rem 0.375rem;
+    font: inherit; font-size: 0.625rem; line-height: 1; letter-spacing: 0.06em;
+    color: var(--enigma-color-muted); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem; cursor: pointer;
+}
+[data-enigma-color-format]:hover { color: var(--enigma-color-text); }
+[data-enigma-color-input] {
+    flex: 1; min-width: 0; padding: 0.25rem 0.375rem;
+    font: inherit; font-family: var(--enigma-color-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 0.75rem; line-height: 1.4;
+    color: var(--enigma-color-text); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem;
+}
+[data-enigma-color-format]:focus-visible,
+[data-enigma-color-input]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 1px; }
+
 [data-enigma-color-swatches] { display: flex; flex-wrap: wrap; gap: 0.25rem; }
 [data-enigma-color-preset] {
     width: 1.125rem; height: 1.125rem; padding: 0;
@@ -144,6 +164,8 @@ var COLOR_STYLES = `
 var INITIAL = { h: 0, s: 0, v: 0, a: 1 };
 var STEP = { fine: 0.01, coarse: 0.1, hue: 1, hueCoarse: 10 };
 var MARGIN = 12;
+var FORMATS = ["hex", "rgb", "hsl"];
+var FORMAT_LABELS = { hex: "HEX", rgb: "RGB", hsl: "HSL" };
 var injected = false;
 function injectStyles() {
   if (injected || typeof document === "undefined") return;
@@ -167,6 +189,7 @@ function ColorExtras({
   placement = "auto",
   styles = true,
   locked = false,
+  openOnMount = false,
   labels
 }) {
   useLayoutEffect(() => {
@@ -176,7 +199,7 @@ function ColorExtras({
   const panelRef = useRef(null);
   const swatchRef = useRef(null);
   const areaRef = useRef(null);
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(openOnMount && !locked);
   const [side, setSide] = useState(placement === "top" ? "top" : "bottom");
   const parsed = useMemo(() => parseColor(value), [value]);
   const [hsv, setHsv] = useState(() => parsed ? rgbToHsv(parsed) : INITIAL);
@@ -305,138 +328,178 @@ function ColorExtras({
     } catch {
     }
   }, [commit, hsv]);
+  const [shown, setShown] = useState(format);
+  useEffect(() => setShown(format), [format]);
+  const [draft, setDraft] = useState(null);
+  const readout = useMemo(() => formatColor(rgb, shown, { alpha }), [rgb, shown, alpha]);
+  const nextFormat = FORMATS[(FORMATS.indexOf(shown) + 1) % FORMATS.length];
+  const typed = useCallback((next) => {
+    setDraft(next);
+    const colour = parseColor(next);
+    if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
+  }, [commit, alpha, hsv.h]);
   const css = useMemo(() => formatColor(rgb, "hex", { alpha: true }), [rgb]);
   const opaque = useMemo(() => toHex({ ...rgb, a: 1 }), [rgb]);
   const text = labels ?? {};
   const valueText = `${text.color ?? "Colour"} ${css}`;
   const panelStyle = { "--enigma-color-hue": Math.round(hsv.h), "--enigma-color-opaque": opaque };
-  return /* @__PURE__ */ jsxs("span", { ref: anchorRef, "data-enigma-color": "", "data-open": open ? "" : void 0, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref: swatchRef,
-        type: "button",
-        "data-enigma-color-swatch": "",
-        "data-enigma-color-checkers": "",
-        "data-invalid": parsed ? void 0 : "",
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        "aria-label": text.open ?? "Pick a colour",
-        title: text.open ?? "Pick a colour",
-        disabled: locked,
-        onClick: () => open ? close(true) : setOpenState(true),
-        children: /* @__PURE__ */ jsx("span", { "data-enigma-color-fill": "", style: { background: parsed ? css : void 0 } })
-      }
-    ),
-    open && !locked && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: panelRef,
-        "data-enigma-color-panel": "",
-        "data-side": side,
-        role: "dialog",
-        "aria-label": text.panel ?? "Colour picker",
-        style: panelStyle,
-        onKeyDown: (event) => {
-          if (event.key !== "Escape") return;
-          event.stopPropagation();
-          close(true);
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: areaRef,
-              "data-enigma-color-area": "",
-              role: "slider",
-              tabIndex: 0,
-              "aria-label": text.area ?? "Saturation and brightness",
-              "aria-valuemin": 0,
-              "aria-valuemax": 100,
-              "aria-valuenow": Math.round(hsv.s * 100),
-              "aria-valuetext": `${Math.round(hsv.s * 100)}% saturation, ${Math.round(hsv.v * 100)}% brightness, ${valueText}`,
-              onKeyDown: areaKeys,
-              onPointerDown: (event) => track(event, (x, y) => commit({ ...hsv, s: x, v: 1 - y })),
-              children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%` } })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { "data-enigma-color-controls": "", children: [
-            /* @__PURE__ */ jsx("span", { "data-enigma-color-preview": "", "data-enigma-color-checkers": "", children: /* @__PURE__ */ jsx("span", { "data-enigma-color-fill": "", style: { background: css } }) }),
-            dropper && /* @__PURE__ */ jsx(
-              "button",
+  return /* @__PURE__ */ jsx(
+    ColorSwatch,
+    {
+      anchorRef,
+      buttonRef: swatchRef,
+      value: css,
+      invalid: !parsed,
+      open,
+      locked,
+      label: text.open ?? "Pick a colour",
+      onPress: () => open ? close(true) : setOpenState(true),
+      children: open && !locked && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          "data-enigma-color-panel": "",
+          "data-side": side,
+          role: "dialog",
+          "aria-label": text.panel ?? "Colour picker",
+          style: panelStyle,
+          onKeyDown: (event) => {
+            if (event.key !== "Escape") return;
+            event.stopPropagation();
+            close(true);
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                type: "button",
-                "data-enigma-color-eyedropper": "",
-                "aria-label": text.eyedropper ?? "Pick a colour from the screen",
-                title: text.eyedropper ?? "Pick a colour from the screen",
-                onClick: () => {
-                  void pick();
-                },
-                children: /* @__PURE__ */ jsx(EyedropperIcon, {})
+                ref: areaRef,
+                "data-enigma-color-area": "",
+                role: "slider",
+                tabIndex: 0,
+                "aria-label": text.area ?? "Saturation and brightness",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(hsv.s * 100),
+                "aria-valuetext": `${Math.round(hsv.s * 100)}% saturation, ${Math.round(hsv.v * 100)}% brightness, ${valueText}`,
+                onKeyDown: areaKeys,
+                onPointerDown: (event) => track(event, (x, y) => commit({ ...hsv, s: x, v: 1 - y })),
+                children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%` } })
               }
             ),
-            /* @__PURE__ */ jsxs("div", { "data-enigma-color-rails": "", children: [
+            /* @__PURE__ */ jsxs("div", { "data-enigma-color-controls": "", children: [
+              /* @__PURE__ */ jsx("span", { "data-enigma-color-preview": "", "data-enigma-color-checkers": "", children: /* @__PURE__ */ jsx("span", { "data-enigma-color-fill": "", style: { background: css } }) }),
+              dropper && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-enigma-color-eyedropper": "",
+                  "aria-label": text.eyedropper ?? "Pick a colour from the screen",
+                  title: text.eyedropper ?? "Pick a colour from the screen",
+                  onClick: () => {
+                    void pick();
+                  },
+                  children: /* @__PURE__ */ jsx(EyedropperIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { "data-enigma-color-rails": "", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-enigma-color-rail": "hue",
+                    role: "slider",
+                    tabIndex: 0,
+                    "aria-label": text.hue ?? "Hue",
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 360,
+                    "aria-valuenow": Math.round(hsv.h),
+                    "aria-valuetext": `${Math.round(hsv.h)} degrees`,
+                    onKeyDown: (event) => railKeys(event, "hue"),
+                    onPointerDown: (event) => track(event, (x) => commit({ ...hsv, h: x * 360 })),
+                    children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.h / 360 * 100}%` } })
+                  }
+                ),
+                alpha && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-enigma-color-rail": "alpha",
+                    "data-enigma-color-checkers": "",
+                    role: "slider",
+                    tabIndex: 0,
+                    "aria-label": text.alpha ?? "Opacity",
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    "aria-valuenow": Math.round(hsv.a * 100),
+                    "aria-valuetext": `${Math.round(hsv.a * 100)}% opacity`,
+                    onKeyDown: (event) => railKeys(event, "alpha"),
+                    onPointerDown: (event) => track(event, (x) => commit({ ...hsv, a: x })),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "data-enigma-color-gradient": "" }),
+                      /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.a * 100}%` } })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { "data-enigma-color-value": "", children: [
               /* @__PURE__ */ jsx(
-                "div",
+                "button",
                 {
-                  "data-enigma-color-rail": "hue",
-                  role: "slider",
-                  tabIndex: 0,
-                  "aria-label": text.hue ?? "Hue",
-                  "aria-valuemin": 0,
-                  "aria-valuemax": 360,
-                  "aria-valuenow": Math.round(hsv.h),
-                  "aria-valuetext": `${Math.round(hsv.h)} degrees`,
-                  onKeyDown: (event) => railKeys(event, "hue"),
-                  onPointerDown: (event) => track(event, (x) => commit({ ...hsv, h: x * 360 })),
-                  children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.h / 360 * 100}%` } })
+                  type: "button",
+                  "data-enigma-color-format": "",
+                  "aria-label": `${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`,
+                  title: `${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`,
+                  onClick: () => {
+                    setShown(nextFormat);
+                    setDraft(null);
+                  },
+                  children: FORMAT_LABELS[shown]
                 }
               ),
-              alpha && /* @__PURE__ */ jsxs(
-                "div",
+              /* @__PURE__ */ jsx(
+                "input",
                 {
-                  "data-enigma-color-rail": "alpha",
-                  "data-enigma-color-checkers": "",
-                  role: "slider",
-                  tabIndex: 0,
-                  "aria-label": text.alpha ?? "Opacity",
-                  "aria-valuemin": 0,
-                  "aria-valuemax": 100,
-                  "aria-valuenow": Math.round(hsv.a * 100),
-                  "aria-valuetext": `${Math.round(hsv.a * 100)}% opacity`,
-                  onKeyDown: (event) => railKeys(event, "alpha"),
-                  onPointerDown: (event) => track(event, (x) => commit({ ...hsv, a: x })),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { "data-enigma-color-gradient": "" }),
-                    /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.a * 100}%` } })
-                  ]
+                  type: "text",
+                  "data-enigma-color-input": "",
+                  value: draft ?? readout,
+                  "aria-label": text.value ?? "Colour value",
+                  spellCheck: false,
+                  autoComplete: "off",
+                  autoCorrect: "off",
+                  autoCapitalize: "off",
+                  onChange: (event) => typed(event.target.value),
+                  onBlur: () => setDraft(null),
+                  onKeyDown: (event) => {
+                    if (event.key !== "Enter") return;
+                    event.preventDefault();
+                    setDraft(null);
+                  }
                 }
               )
-            ] })
-          ] }),
-          swatches && swatches.length > 0 && /* @__PURE__ */ jsx("div", { "data-enigma-color-swatches": "", role: "group", "aria-label": text.swatches ?? "Preset colours", children: swatches.map((preset) => {
-            const colour = parseColor(preset);
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-enigma-color-preset": "",
-                "data-enigma-color-checkers": "",
-                style: { background: preset },
-                "aria-label": preset,
-                title: preset,
-                "aria-pressed": colourEqualsPreset(colour, css),
-                onClick: () => {
-                  if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
-                }
-              },
-              preset
-            );
-          }) })
-        ]
-      }
-    )
-  ] });
+            ] }),
+            swatches && swatches.length > 0 && /* @__PURE__ */ jsx("div", { "data-enigma-color-swatches": "", role: "group", "aria-label": text.swatches ?? "Preset colours", children: swatches.map((preset) => {
+              const colour = parseColor(preset);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-enigma-color-preset": "",
+                  "data-enigma-color-checkers": "",
+                  style: { background: preset },
+                  "aria-label": preset,
+                  title: preset,
+                  "aria-pressed": colourEqualsPreset(colour, css),
+                  onClick: () => {
+                    if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
+                  }
+                },
+                preset
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
 }
 function colourEqualsPreset(preset, current) {
   return colorEquals(preset, parseColor(current));

package/dist/{index-ZPvlf9vs.d.ts → index-qXOkYQCU.d.ts}

@@ -145,6 +145,10 @@ interface ColorLabels {
     alpha?: string;
     eyedropper?: string;
     swatches?: string;
+    /** The editable readout under the rails. Default "Colour value". */
+    value?: string;
+    /** The button that cycles the readout between HEX, RGB and HSL. Default "Show as". */
+    formatAs?: string;
     /** The word before the colour in what a screen reader announces. Default "Colour". */
     color?: string;
 }

package/dist/next/index.d.ts

@@ -7,7 +7,7 @@ export { UseSearchResult, useSearch } from '../react/search.js';
 export { I as InputAction, b as InputIcon, d as InputOptions } from '../input-BwXjFenq.js';
 export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions, s as shortenQuery } from '../search-DYgqRp37.js';
 export { c as ButtonOptions, d as ButtonState } from '../button-CaXaqG_K.js';
-export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-ZPvlf9vs.js';
+export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-qXOkYQCU.js';
 export { C as ColorFormat, E as EstimateOptions, F as FormatColorOptions, G as GeneratePasswordOptions, H as Hsl, a as Hsv, b as PasswordScore, c as PasswordStrengthReport, R as Rgb, d as colorEquals, e as estimatePasswordStrength, f as formatColor, g as generatePassword, h as hslToRgb, i as hsvToRgb, p as parseColor, r as rgbToHsl, j as rgbToHsv, t as toHex } from '../color-D_rZ83Oc.js';
 export { Slot, SlotProps, mergeSlotProps } from '../react/slot.js';
 export { UseNotificationsResult, createNotificationQueue, defaultQueue, useNotifications } from '../react/notifications.js';

package/dist/next/index.js

@@ -23,8 +23,8 @@ export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeF
 import '../chunk-SNYUBXWQ.js';
 import '../chunk-UOSSNUSC.js';
 import '../chunk-2QFTRNAZ.js';
-export { Input } from '../chunk-QJJ34E4G.js';
-import '../chunk-S7EE57YB.js';
+export { Input } from '../chunk-3MGBZOAU.js';
+import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';
 export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';
 export { Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext } from '../chunk-VKL3DEIQ.js';

package/dist/react/index.d.ts

@@ -7,8 +7,8 @@ export { UseSearchResult, useSearch } from './search.js';
 export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions, s as shortenQuery } from '../search-DYgqRp37.js';
 import { d as ButtonState, c as ButtonOptions } from '../button-CaXaqG_K.js';
 export { Button, ButtonProps } from './button.js';
-import { h as PasswordStrengthClassNames } from '../index-ZPvlf9vs.js';
-export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-ZPvlf9vs.js';
+import { h as PasswordStrengthClassNames } from '../index-qXOkYQCU.js';
+export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-qXOkYQCU.js';
 import { c as PasswordStrengthReport } from '../color-D_rZ83Oc.js';
 export { C as ColorFormat, E as EstimateOptions, F as FormatColorOptions, G as GeneratePasswordOptions, H as Hsl, a as Hsv, b as PasswordScore, R as Rgb, d as colorEquals, e as estimatePasswordStrength, f as formatColor, g as generatePassword, h as hslToRgb, i as hsvToRgb, p as parseColor, r as rgbToHsl, j as rgbToHsv, t as toHex } from '../color-D_rZ83Oc.js';
 export { Slot, SlotProps, mergeSlotProps } from './slot.js';

package/dist/react/index.js

@@ -22,8 +22,8 @@ export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeF
 import '../chunk-SNYUBXWQ.js';
 import '../chunk-UOSSNUSC.js';
 import '../chunk-2QFTRNAZ.js';
-export { Input } from '../chunk-QJJ34E4G.js';
-import '../chunk-S7EE57YB.js';
+export { Input } from '../chunk-3MGBZOAU.js';
+import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';
 export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';
 export { Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext } from '../chunk-VKL3DEIQ.js';

package/dist/react/input.d.ts

@@ -1,4 +1,4 @@
-export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-ZPvlf9vs.js';
+export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-qXOkYQCU.js';
 import 'react';
 import '../color-D_rZ83Oc.js';
 import '../search-DYgqRp37.js';

package/dist/react/input.js

@@ -1,4 +1,4 @@
 "use client";
-export { Input } from '../chunk-QJJ34E4G.js';
-import '../chunk-S7EE57YB.js';
+export { Input } from '../chunk-3MGBZOAU.js';
+import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';

package/dist/react-router/index.d.ts

@@ -7,7 +7,7 @@ export { UseSearchResult, useSearch } from '../react/search.js';
 export { I as InputAction, b as InputIcon, d as InputOptions } from '../input-BwXjFenq.js';
 export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions, s as shortenQuery } from '../search-DYgqRp37.js';
 export { c as ButtonOptions, d as ButtonState } from '../button-CaXaqG_K.js';
-export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-ZPvlf9vs.js';
+export { B as BreachChecker, a as BreachState, b as BreachStatus, C as ColorLabels, c as ColorOnlyProps, d as ColorPanelPlacement, F as FieldAction, I as Input, e as InputBaseProps, f as InputProps, g as InputType, P as PasswordOnlyProps, i as PlainOnlyProps, S as SearchOnlyProps } from '../index-qXOkYQCU.js';
 export { C as ColorFormat, E as EstimateOptions, F as FormatColorOptions, G as GeneratePasswordOptions, H as Hsl, a as Hsv, b as PasswordScore, c as PasswordStrengthReport, R as Rgb, d as colorEquals, e as estimatePasswordStrength, f as formatColor, g as generatePassword, h as hslToRgb, i as hsvToRgb, p as parseColor, r as rgbToHsl, j as rgbToHsv, t as toHex } from '../color-D_rZ83Oc.js';
 export { Slot, SlotProps, mergeSlotProps } from '../react/slot.js';
 export { UseNotificationsResult, createNotificationQueue, defaultQueue, useNotifications } from '../react/notifications.js';

package/dist/react-router/index.js

@@ -23,8 +23,8 @@ export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeF
 import '../chunk-SNYUBXWQ.js';
 import '../chunk-UOSSNUSC.js';
 import '../chunk-2QFTRNAZ.js';
-export { Input } from '../chunk-QJJ34E4G.js';
-import '../chunk-S7EE57YB.js';
+export { Input } from '../chunk-3MGBZOAU.js';
+import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';
 export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';
 export { Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext } from '../chunk-VKL3DEIQ.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "sideEffects": [

package/recipes/color/styles.css

@@ -134,6 +134,26 @@
 [data-enigma-color-eyedropper]:hover { color: var(--enigma-color-text); }
 [data-enigma-color-eyedropper]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
 
+/* The value as text, with the notation beside it. Monospace on purpose: a hex whose digits
+   shift width as you drag is a value nobody can read at a glance. */
+[data-enigma-color-value] { display: flex; align-items: center; gap: 0.375rem; }
+[data-enigma-color-format] {
+    flex: none; padding: 0.3125rem 0.375rem;
+    font: inherit; font-size: 0.625rem; line-height: 1; letter-spacing: 0.06em;
+    color: var(--enigma-color-muted); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem; cursor: pointer;
+}
+[data-enigma-color-format]:hover { color: var(--enigma-color-text); }
+[data-enigma-color-input] {
+    flex: 1; min-width: 0; padding: 0.25rem 0.375rem;
+    font: inherit; font-family: var(--enigma-color-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 0.75rem; line-height: 1.4;
+    color: var(--enigma-color-text); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem;
+}
+[data-enigma-color-format]:focus-visible,
+[data-enigma-color-input]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 1px; }
+
 [data-enigma-color-swatches] { display: flex; flex-wrap: wrap; gap: 0.25rem; }
 [data-enigma-color-preset] {
     width: 1.125rem; height: 1.125rem; padding: 0;

package/registry.json

@@ -156,7 +156,7 @@
     {
       "name": "input",
       "title": "Input, one field for every type",
-      "description": "A field you pass props to, typed by its `type`: password gets the reveal toggle, a generator, a strength meter and a breach check; search gets debouncing, ranking and a clear button; color gets a swatch and a picker panel - saturation square, hue and alpha rails, presets and the screen eyedropper - instead of the operating system popup; everything else is a plain field with native props. What each type needs is loaded when that type is used, so a form of text fields ships none of it.",
+      "description": "A field you pass props to, typed by its `type`: password gets the reveal toggle, a generator, a strength meter and a breach check; search gets debouncing, ranking and a clear button; color gets a swatch and a picker panel - saturation square, hue and alpha rails, an editable readout that prints the value as hex, rgb() or hsl(), presets and the screen eyedropper - instead of the operating system popup, and the swatch is there from the first frame rather than when the panel's code lands; everything else is a plain field with native props. What each type needs is loaded when that type is used, so a form of text fields ships none of it.",
       "targets": [
         "vanilla",
         "astro",
@@ -279,6 +279,13 @@
             "react"
           ]
         },
+        {
+          "path": "src/react/input/color-swatch.tsx",
+          "dest": "input/color-swatch.tsx",
+          "targets": [
+            "react"
+          ]
+        },
         {
           "path": "src/react/input/color.tsx",
           "dest": "input/color.tsx",
@@ -289,7 +296,8 @@
             "@/core/color": "./color-core",
             "@/react/input/write-value": "./write-value",
             "@/react/input/color-styles": "./color-styles",
-            "@/react/input/types": "./types"
+            "@/react/input/types": "./types",
+            "@/react/input/color-swatch": "./color-swatch"
           }
         },
         {
@@ -325,7 +333,8 @@
             "@/react/input/password": "./password",
             "@/react/input/search": "./search",
             "@/core/password": "./password-core",
-            "@/react/input/color": "./color"
+            "@/react/input/color": "./color",
+            "@/react/input/color-swatch": "./color-swatch"
           }
         },
         {

package/src/react/input/color-styles.ts

@@ -146,6 +146,26 @@ export const COLOR_STYLES = `
 [data-enigma-color-eyedropper]:hover { color: var(--enigma-color-text); }
 [data-enigma-color-eyedropper]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
 
+/* The value as text, with the notation beside it. Monospace on purpose: a hex whose digits
+   shift width as you drag is a value nobody can read at a glance. */
+[data-enigma-color-value] { display: flex; align-items: center; gap: 0.375rem; }
+[data-enigma-color-format] {
+    flex: none; padding: 0.3125rem 0.375rem;
+    font: inherit; font-size: 0.625rem; line-height: 1; letter-spacing: 0.06em;
+    color: var(--enigma-color-muted); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem; cursor: pointer;
+}
+[data-enigma-color-format]:hover { color: var(--enigma-color-text); }
+[data-enigma-color-input] {
+    flex: 1; min-width: 0; padding: 0.25rem 0.375rem;
+    font: inherit; font-family: var(--enigma-color-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 0.75rem; line-height: 1.4;
+    color: var(--enigma-color-text); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem;
+}
+[data-enigma-color-format]:focus-visible,
+[data-enigma-color-input]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 1px; }
+
 [data-enigma-color-swatches] { display: flex; flex-wrap: wrap; gap: 0.25rem; }
 [data-enigma-color-preset] {
     width: 1.125rem; height: 1.125rem; padding: 0;

package/src/react/input/color-swatch.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import type { CSSProperties, ReactNode, Ref } from "react";
+
+/**
+ * The swatch in the field, and the box the panel hangs from.
+ *
+ * Its own module, and deliberately NOT part of the picker's chunk. The picker is imported on
+ * demand, so a swatch that lived in there would not exist for as long as that request takes -
+ * the field renders as a bare text box, the affordance appears late and shifts the row, and a
+ * press in that window reaches nothing at all. On a fast connection that is a blink; on a
+ * cold cache it is the second or two somebody spends clicking a swatch that is not there yet.
+ *
+ * So the swatch ships with the field and the panel arrives behind it. It costs the markup
+ * below in the base chunk and no colour maths at all: the fill is handed to the browser, which
+ * is the only parser that already knows every notation a value could be written in.
+ */
+
+/**
+ * Enough of a look to be a swatch, for the frames before the panel's stylesheet exists.
+ *
+ * The sheet ships with the picker, so the swatch rendered ahead of it would otherwise be a
+ * default browser button for as long as that request takes - which trades a missing control
+ * for an ugly one. Written against the same custom properties, so a project that themed the
+ * picker themes this too, and dropped entirely the moment the real swatch replaces it.
+ */
+const BASELINE: CSSProperties = {
+    display: "block",
+    boxSizing: "border-box",
+    width: "1.25rem",
+    height: "1.25rem",
+    padding: 0,
+    background: "none",
+    border: "1px solid var(--enigma-color-border, #404040)",
+    borderRadius: "0.3125rem",
+    overflow: "hidden",
+    cursor: "pointer"
+};
+
+export interface ColorSwatchProps {
+    /** The value to paint, exactly as the field holds it. Anything unparseable paints nothing. */
+    value?: string;
+    /** Whether the panel is up, for `aria-expanded`. */
+    open?: boolean;
+    /** The value is not a colour: the swatch shows the chequerboard rather than a stale fill. */
+    invalid?: boolean;
+    /** The field is disabled or read-only. */
+    locked?: boolean;
+    label: string;
+    anchorRef?: Ref<HTMLSpanElement>;
+    buttonRef?: Ref<HTMLButtonElement>;
+    onPress?: () => void;
+    /** The picker's stylesheet has not arrived yet, so carry the few declarations it needs. */
+    baseline?: boolean;
+    /** The panel, once its code is here. */
+    children?: ReactNode;
+}
+
+export function ColorSwatch({ value, open = false, invalid = false, locked = false, label, anchorRef, buttonRef, onPress, baseline = false, children }: ColorSwatchProps): ReactNode {
+    return (
+        <span
+            ref={anchorRef}
+            data-enigma-color=""
+            data-open={open ? "" : undefined}
+            style={baseline ? { position: "relative", display: "inline-flex", flex: "none" } : undefined}
+        >
+            <button
+                ref={buttonRef}
+                // Never a bare `<button>`: inside a form it would default to submit, so opening
+                // the picker would post the half-filled form. The same trap the reveal has.
+                type="button"
+                data-enigma-color-swatch=""
+                data-enigma-color-checkers=""
+                data-invalid={invalid ? "" : undefined}
+                aria-haspopup="dialog"
+                aria-expanded={open}
+                aria-label={label}
+                title={label}
+                disabled={locked}
+                style={baseline ? BASELINE : undefined}
+                onClick={onPress}
+            >
+                {/* The browser parses the value for us: an unparseable string simply applies
+                    nothing, which is why the swatch needs no colour maths to fall back on. */}
+                <span
+                    data-enigma-color-fill=""
+                    style={{
+                        background: invalid ? undefined : value,
+                        ...(baseline ? { display: "block", width: "100%", height: "100%" } : null)
+                    }}
+                />
+            </button>
+            {children}
+        </span>
+    );
+}

package/src/react/input/color.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { writeValue } from "@/react/input/write-value";
+import { ColorSwatch } from "@/react/input/color-swatch";
 import { COLOR_STYLES } from "@/react/input/color-styles";
 import type { ColorLabels, ColorPanelPlacement } from "@/react/input/types";
 import { parseColor, formatColor, rgbToHsv, hsvToRgb, toHex, colorEquals, type Hsv, type ColorFormat } from "@/core/color";
@@ -47,6 +48,10 @@ const STEP = { fine: 0.01, coarse: 0.1, hue: 1, hueCoarse: 10 };
 /** Kept clear of the window edge when deciding which side to open on. */
 const MARGIN = 12;
 
+/** The notations the readout cycles through, in the order the button steps over them. */
+const FORMATS: ColorFormat[] = ["hex", "rgb", "hsl"];
+const FORMAT_LABELS: Record<ColorFormat, string> = { hex: "HEX", rgb: "RGB", hsl: "HSL" };
+
 let injected = false;
 
 function injectStyles(): void {
@@ -76,6 +81,11 @@ export interface ColorExtrasProps {
     styles?: boolean;
     /** The field is disabled or read-only: the swatch is inert and the panel never opens. */
     locked?: boolean;
+    /**
+     * The swatch was already pressed, while this module was still being fetched. Opens the
+     * panel on the first render rather than asking for the press a second time.
+     */
+    openOnMount?: boolean;
     labels?: ColorLabels;
 }
 
@@ -89,6 +99,7 @@ export function ColorExtras({
     placement = "auto",
     styles = true,
     locked = false,
+    openOnMount = false,
     labels
 }: ColorExtrasProps): ReactNode {
     // Before paint: a sheet applied after the first frame shows the panel unstyled first.
@@ -99,7 +110,7 @@ export function ColorExtras({
     const swatchRef = useRef<HTMLButtonElement | null>(null);
     const areaRef = useRef<HTMLDivElement | null>(null);
 
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(openOnMount && !locked);
     const [side, setSide] = useState<"top" | "bottom">(placement === "top" ? "top" : "bottom");
 
     const parsed = useMemo(() => parseColor(value), [value]);
@@ -296,6 +307,33 @@ export function ColorExtras({
         }
     }, [commit, hsv]);
 
+    /* -------- the readout, which is the value in whichever notation you want to read it -------- */
+
+    /**
+     * Which notation the panel PRINTS the colour in, and only that.
+     *
+     * `format` is the caller's contract - the spelling their column, their API or their CSS
+     * expects - so cycling this button never changes what is written into the field. It
+     * changes what you can read out of the panel and paste elsewhere, which is what the
+     * browser's own picker offers and what a picker showing no code at all cannot.
+     */
+    const [shown, setShown] = useState<ColorFormat>(format);
+    useEffect(() => setShown(format), [format]);
+
+    /** What is being typed, while it is being typed. Null means "show the current colour". */
+    const [draft, setDraft] = useState<string | null>(null);
+
+    const readout = useMemo(() => formatColor(rgb, shown, { alpha }), [rgb, shown, alpha]);
+    const nextFormat = FORMATS[(FORMATS.indexOf(shown) + 1) % FORMATS.length] as ColorFormat;
+
+    const typed = useCallback((next: string) => {
+        setDraft(next);
+        const colour = parseColor(next);
+        // Applied as it becomes a colour, so the square and the rails follow a pasted value
+        // rather than waiting for a blur. Half-typed text simply is not one yet.
+        if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
+    }, [commit, alpha, hsv.h]);
+
     /* -------- rendering -------- */
 
     const css = useMemo(() => formatColor(rgb, "hex", { alpha: true }), [rgb]);
@@ -306,27 +344,16 @@ export function ColorExtras({
     const panelStyle = { "--enigma-color-hue": Math.round(hsv.h), "--enigma-color-opaque": opaque } as CSSProperties;
 
     return (
-        <span ref={anchorRef} data-enigma-color="" data-open={open ? "" : undefined}>
-            <button
-                ref={swatchRef}
-                // Never a bare `<button>`: inside a form it would default to submit, so opening
-                // the picker would post the half-filled form. The same trap the reveal has.
-                type="button"
-                data-enigma-color-swatch=""
-                data-enigma-color-checkers=""
-                data-invalid={parsed ? undefined : ""}
-                aria-haspopup="dialog"
-                aria-expanded={open}
-                aria-label={text.open ?? "Pick a colour"}
-                title={text.open ?? "Pick a colour"}
-                disabled={locked}
-                onClick={() => (open ? close(true) : setOpenState(true))}
-            >
-                {/* The browser parses the value for us: an unparseable string simply applies
-                    nothing, which is why the swatch needs no colour maths to fall back on. */}
-                <span data-enigma-color-fill="" style={{ background: parsed ? css : undefined }} />
-            </button>
-
+        <ColorSwatch
+            anchorRef={anchorRef}
+            buttonRef={swatchRef}
+            value={css}
+            invalid={!parsed}
+            open={open}
+            locked={locked}
+            label={text.open ?? "Pick a colour"}
+            onPress={() => (open ? close(true) : setOpenState(true))}
+        >
             {open && !locked && (
                 <div
                     ref={panelRef}
@@ -421,6 +448,40 @@ export function ColorExtras({
                         </div>
                     </div>
 
+                    {/* The colour as text, editable, with the notation next to it. A picker
+                        that shows no code is one you cannot read a value out of, cannot paste
+                        one into, and cannot check against the hex somebody sent you. */}
+                    <div data-enigma-color-value="">
+                        <button
+                            type="button"
+                            data-enigma-color-format=""
+                            aria-label={`${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`}
+                            title={`${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`}
+                            onClick={() => { setShown(nextFormat); setDraft(null); }}
+                        >
+                            {FORMAT_LABELS[shown]}
+                        </button>
+                        <input
+                            type="text"
+                            data-enigma-color-input=""
+                            value={draft ?? readout}
+                            aria-label={text.value ?? "Colour value"}
+                            spellCheck={false}
+                            autoComplete="off"
+                            autoCorrect="off"
+                            autoCapitalize="off"
+                            onChange={(event) => typed(event.target.value)}
+                            // What was typed goes back to the canonical spelling the moment the
+                            // field is left, the way the input itself normalizes on blur.
+                            onBlur={() => setDraft(null)}
+                            onKeyDown={(event) => {
+                                if (event.key !== "Enter") return;
+                                event.preventDefault();
+                                setDraft(null);
+                            }}
+                        />
+                    </div>
+
                     {swatches && swatches.length > 0 && (
                         <div data-enigma-color-swatches="" role="group" aria-label={text.swatches ?? "Preset colours"}>
                             {swatches.map((preset) => {
@@ -445,7 +506,7 @@ export function ColorExtras({
                     )}
                 </div>
             )}
-        </span>
+        </ColorSwatch>
     );
 }
 

package/src/react/input/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Icon } from "@/react/input/icon";
+import { ColorSwatch } from "@/react/input/color-swatch";
 import { INPUT_ICON_PATHS } from "@/core/input-icons";
 import { writeValue } from "@/react/input/write-value";
 import type { AnyInputProps, InputProps, FieldAction, BreachState } from "@/react/input/types";
@@ -96,6 +97,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
     const innerRef = useRef<HTMLInputElement | null>(null);
     const [element, setElement] = useState<HTMLInputElement | null>(null);
     const [revealed, setRevealed] = useState(false);
+    /**
+     * The swatch was pressed before the picker's code arrived.
+     *
+     * Remembered rather than dropped: the press was a request to open the panel, and a
+     * control that ignores one because a chunk was in flight is a control that feels broken
+     * for exactly as long as the network is slow.
+     */
+    const [colorWanted, setColorWanted] = useState(false);
     const describedBy = useId();
 
     const isPassword = type === "password";
@@ -263,12 +272,26 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
             data-score={score ?? undefined}
         >
             <div {...fieldProps} data-enigma-input-field="">
-                {/* No fallback, for the reason the meter has none: the field is already on
-                    screen and typeable, and a placeholder where a swatch is about to appear
-                    would be a second layout shift rather than one. */}
+                {/* The swatch is NOT part of the picker's chunk, unlike the meter, which has
+                    nothing to show until it has been asked a question. A colour field with no
+                    swatch until a request lands is a field whose only affordance is missing,
+                    and a press in that window reaches nothing: so the button is here from the
+                    first frame, and a press before the panel's code arrives opens it as soon
+                    as it does. */}
                 {isColor && (
-                    <Suspense fallback={null}>
+                    <Suspense
+                        fallback={
+                            <ColorSwatch
+                                value={value}
+                                locked={locked}
+                                baseline={styles !== false}
+                                label={colorLabels?.open ?? "Pick a colour"}
+                                onPress={() => setColorWanted(true)}
+                            />
+                        }
+                    >
                         <ColorExtras
+                            openOnMount={colorWanted}
                             input={element}
                             value={value}
                             format={format}

package/src/react/input/types.ts

@@ -151,6 +151,10 @@ export interface ColorLabels {
     alpha?: string;
     eyedropper?: string;
     swatches?: string;
+    /** The editable readout under the rails. Default "Colour value". */
+    value?: string;
+    /** The button that cycles the readout between HEX, RGB and HSL. Default "Show as". */
+    formatAs?: string;
     /** The word before the colour in what a screen reader announces. Default "Colour". */
     color?: string;
 }

package/dist/chunk-S7EE57YB.js

@@ -1,9 +0,0 @@
-// src/react/input/write-value.ts
-function writeValue(input, next) {
-  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
-  if (setter) setter.call(input, next);
-  else input.value = next;
-  input.dispatchEvent(new Event("input", { bubbles: true }));
-}
-
-export { writeValue };