@qoretechnologies/reqraft 0.10.62 → 0.10.63-pr.142.g0b675cd

package/dist/components/form/fields/color/Color.js

@@ -14,31 +14,626 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
         }
-    return t;
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorFormField = exports.StyledSketchPicker = void 0;
+exports.ColorFormField = exports.StyledColorField = exports.TAP_TARGET_PX = exports.colorToRgba = exports.DEFAULT_COLOR_PRESETS = exports.DEFAULT_COLOR_FORM_FIELD_LABELS = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_color_1 = require("react-color");
-var styled_components_1 = __importDefault(require("styled-components"));
-exports.StyledSketchPicker = (0, styled_components_1.default)(react_color_1.SketchPicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: transparent !important;\n  width: 100% !important;\n  max-width: 400px !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n\n  > div:first-child {\n    padding-bottom: unset !important;\n    height: 100px !important;\n  }\n\n  label {\n    color: #fff !important;\n  }\n  input {\n    width: 100% !important;\n  }\n  .flexbox-fix {\n    border: none !important;\n  }\n"], ["\n  background-color: transparent !important;\n  width: 100% !important;\n  max-width: 400px !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n\n  > div:first-child {\n    padding-bottom: unset !important;\n    height: 100px !important;\n  }\n\n  label {\n    color: #fff !important;\n  }\n  input {\n    width: 100% !important;\n  }\n  .flexbox-fix {\n    border: none !important;\n  }\n"])));
+// Copyright 2026 Qore Technologies, s.r.o.
+var reqore_1 = require("@qoretechnologies/reqore");
+var colors_1 = require("@qoretechnologies/reqore/dist/helpers/colors");
+var color_convert_1 = require("@uiw/color-convert");
+var react_color_alpha_1 = __importStar(require("@uiw/react-color-alpha"));
+var react_color_hue_1 = __importDefault(require("@uiw/react-color-hue"));
+var react_color_saturation_1 = __importDefault(require("@uiw/react-color-saturation"));
+var polished_1 = require("polished");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var useCoarsePointer_1 = require("../../../../hooks/useCoarsePointer");
+var colorValue_1 = require("../../../colorValue/colorValue");
+var markdownRendererContext_1 = require("../../../Description/markdownRendererContext");
+var MarkdownView_1 = require("../markdown/MarkdownView");
+/** Text as a markdown code span, whatever backticks it holds: drawn in the data style. */
+var code = function (text) {
+    var _a;
+    var longest = Math.max.apply(Math, __spreadArray([0], ((_a = text.match(/`+/g)) !== null && _a !== void 0 ? _a : []).map(function (run) { return run.length; }), false));
+    var fence = '`'.repeat(longest + 1);
+    return longest ? "".concat(fence, " ").concat(text, " ").concat(fence) : "".concat(fence).concat(text).concat(fence);
+};
+var characters = function (chars) {
+    return Array.from(new Set(chars.split('')))
+        .map(function (char) { return (char === ' ' ? 'a space' : code(char)); })
+        .join(', ');
+};
+exports.DEFAULT_COLOR_FORM_FIELD_LABELS = {
+    hex: 'Hex code',
+    red: 'Red',
+    green: 'Green',
+    blue: 'Blue',
+    opacity: 'Opacity %',
+    area: 'Strength and brightness',
+    hue: 'Color',
+    preview: function (hex, opacity) {
+        return opacity === 100 ? "Chosen color: ".concat(hex) : "Chosen color: ".concat(hex, ", ").concat(opacity, "% opaque");
+    },
+    noColor: 'No color chosen yet',
+    help: 'What do these mean?',
+    helpArea: 'The square sets how strong the color is (left to right) and how bright (bottom to top); the rainbow bar under it sets the color itself.',
+    helpHex: 'Hex code: the whole color as six characters, each 0–9 or A–F, two each for red, green and blue: `6495ED` is cornflower blue. Three characters are short for six: `F80` is `FF8800`.',
+    helpChannels: 'Red, Green, Blue: how much red, green and blue light make the color, each from `0` (none) to `255` (all). `0, 0, 0` is black and `255, 255, 255` is white.',
+    helpOpacity: 'Opacity: how solid the color is, from `0%` (you see through it) to `100%` (solid). The squares behind the preview show through a color that is not solid.',
+    swatch: function (title) { return "Use ".concat(title); },
+    notHex: function (chars) {
+        return "".concat(characters(chars), " cannot be in a hex code: use the digits 0\u20139 and the letters A\u2013F.");
+    },
+    notDigits: function (chars, field) { return "".concat(characters(chars), " cannot be in ").concat(field, ": type a whole number."); },
+    hexTooLong: 'A hex code has six characters.',
+    hexLength: function (text) {
+        return "".concat(code(text), " is not a color: a hex code has six characters (or three, short for six).");
+    },
+    hexEmpty: 'Type a hex code: six characters, each 0–9 or A–F.',
+    outOfRange: function (field, max) { return "".concat(field, " goes from `0` to `").concat(max, "`."); },
+    empty: function (field, max) { return "".concat(field, " needs a whole number from `0` to `").concat(max, "`."); },
+};
+/** The colors offered as swatches when a host offers none of its own. */
+exports.DEFAULT_COLOR_PRESETS = [
+    '#D0021B',
+    '#F5A623',
+    '#F8E61B',
+    '#8B572A',
+    '#7ED321',
+    '#417505',
+    '#BD10E0',
+    '#9013FE',
+    '#4A90E2',
+    '#50E3C2',
+    '#B8E986',
+    '#000000',
+    '#4A4A4A',
+    '#9B9B9B',
+    '#FFFFFF',
+];
+/**
+ * What the picker shows while the field holds no color: a starting color. A constant, so clearing the
+ * value moves the picker back to it, and an empty field does not reset it on every render.
+ */
+var NO_COLOR = { h: 209, s: 36, v: 90, a: 1 };
+var isChannel = function (n) { return typeof n === 'number' && Number.isFinite(n); };
+var clamp = function (n, min, max) { return Math.min(max, Math.max(min, n)); };
+/**
+ * A color as it may be stored: red, green and blue whole numbers from 0 to 255, and the alpha from 0 to 1
+ * in hundredths, which is what the opacity field shows. Nothing past these is ever stored.
+ */
+var toStoredColor = function (_a) {
+    var r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    return ({
+        r: clamp(Math.round(r), 0, 255),
+        g: clamp(Math.round(g), 0, 255),
+        b: clamp(Math.round(b), 0, 255),
+        a: clamp(Math.round(a * 100) / 100, 0, 1),
+    });
+};
+/**
+ * A stored color as red, green, blue and alpha: `{ r, g, b, a? }` as the field stores it, or a hex color,
+ * bare or as `{ hex }`, as a value written by hand or by another client can be. Undefined when it is none
+ * of these. A channel past its range is brought into it, so what is shown, and stored from it, is a color.
+ * Only `{ r, g, b, a? }` is a stored color (`isStoredColor`); the others are read so they can be seen and fixed.
+ */
+var colorToRgba = function (value) {
+    if (typeof value === 'string') {
+        // reqraft's one hex reader: 3, 4, 6 or 8 digits, the short ones doubled, the last pair (or digit) the opacity
+        var read = (0, colorValue_1.readHexColor)(value);
+        return read ? toStoredColor(read) : undefined;
+    }
+    if (value && typeof value === 'object') {
+        var _a = value, r = _a.r, g = _a.g, b = _a.b, a = _a.a, hex = _a.hex;
+        if (isChannel(r) && isChannel(g) && isChannel(b)) {
+            return toStoredColor({ r: r, g: g, b: b, a: isChannel(a) ? a : 1 });
+        }
+        if (typeof hex === 'string') {
+            // its own opacity where the code gives one, or the opacity beside it, as the readers paint it
+            var read = (0, colorValue_1.readHexColor)(hex);
+            return read ?
+                toStoredColor(__assign(__assign({}, read), { a: !(0, colorValue_1.hexGivesOpacity)(hex) && isChannel(a) ? a : read.a }))
+                : undefined;
+        }
+    }
+    return undefined;
+};
+exports.colorToRgba = colorToRgba;
+var sameRgba = function (x, y) {
+    return x.r === y.r && x.g === y.g && x.b === y.b && x.a === y.a;
+};
+var hexOf = function (color) { return (0, color_convert_1.rgbaToHex)(color).replace(/^#/, '').toUpperCase(); };
+/** A finger's target: the smallest a control should be on a touch screen. */
+exports.TAP_TARGET_PX = 44;
+/** The sizes of the picker's parts, for a mouse and for a finger. */
+var sizesFor = function (coarse) { return ({
+    /** The color square's height. */
+    area: coarse ? 160 : 100,
+    /** A slider's visible bar. */
+    track: coarse ? 28 : 12,
+    /** A slider's reach: the bar and the room around it a touch still lands on. */
+    reach: coarse ? exports.TAP_TARGET_PX : 20,
+    /** The preview's side. */
+    preview: coarse ? 56 : 40,
+    /** A swatch's side. */
+    swatch: coarse ? exports.TAP_TARGET_PX : 18,
+}); };
+var CHANNEL_MAX = { r: 255, g: 255, b: 255, a: 100 };
+/** What the field shows in each input for a color. */
+var fieldTexts = function (color) { return ({
+    hex: hexOf(color),
+    r: String(color.r),
+    g: String(color.g),
+    b: String(color.b),
+    a: String(Math.round(color.a * 100)),
+}); };
+/**
+ * Text typed into a field, kept to what the field can hold: the characters that can be in it, up to its
+ * length. Returns what is kept, the characters dropped, and whether the text was too long.
+ */
+var keepValid = function (field, text) {
+    // a hex code's own mark, written or pasted with it, is not a character of the code
+    var source = field === 'hex' ? text.trim().replace(/^#/, '') : text.trim();
+    var allowed = field === 'hex' ? /[0-9a-f]/i : /[0-9]/;
+    var max = field === 'hex' ? 6 : 3;
+    var kept = '';
+    var dropped = '';
+    for (var _i = 0, source_1 = source; _i < source_1.length; _i++) {
+        var char = source_1[_i];
+        if (allowed.test(char)) {
+            kept += char;
+        }
+        else {
+            dropped += char;
+        }
+    }
+    return {
+        kept: (field === 'hex' ? kept.toUpperCase() : kept).slice(0, max),
+        dropped: dropped,
+        long: kept.length > max,
+    };
+};
+exports.StyledColorField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  width: 100%;\n  max-width: 400px;\n  color: ", ";\n  opacity: ", ";\n  cursor: ", ";\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  width: 100%;\n  max-width: 400px;\n  color: ", ";\n  opacity: ", ";\n  cursor: ", ";\n"])), function (_a) {
+    var $text = _a.$text;
+    return $text;
+}, function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 0.5 : 1);
+}, function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'not-allowed' : 'auto');
+});
+var StyledArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  .w-color-saturation:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  .w-color-saturation:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n"])), function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.2);
+}, function (_a) {
+    var $text = _a.$text;
+    return $text;
+});
+var StyledSliders = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n"])));
+var StyledSliderStack = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  flex: 1 1 auto;\n  min-width: 0;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-flow: column;\n  flex: 1 1 auto;\n  min-width: 0;\n  gap: 4px;\n"])));
+/** A checkerboard, under whatever is not solid: the preview and the opacity bar. */
+var checkerboard = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-position: left center;\n  background-color: #fff;\n"], ["\n  background-image: url(", ");\n  background-position: left center;\n  background-color: #fff;\n"])), react_color_alpha_1.BACKGROUND_IMG);
+var StyledPreview = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  flex: 0 0 auto;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 6px;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px ", ";\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px ", ";\n    ", "\n  }\n"], ["\n  position: relative;\n  flex: 0 0 auto;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 6px;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px ", ";\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px ", ";\n    ", "\n  }\n"])), function (_a) {
+    var $size = _a.$size;
+    return $size;
+}, function (_a) {
+    var $size = _a.$size;
+    return $size;
+}, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.3);
+}, checkerboard, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.3);
+}, function (_a) {
+    var $color = _a.$color;
+    return $color ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background: ", ";\n        "], ["\n          background: ", ";\n        "])), $color) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          /* no color yet: struck through */\n          background: linear-gradient(\n            to top right,\n            transparent calc(50% - 1.5px),\n            #d0021b calc(50% - 1.5px),\n            #d0021b calc(50% + 1.5px),\n            transparent calc(50% + 1.5px)\n          );\n        "], ["\n          /* no color yet: struck through */\n          background: linear-gradient(\n            to top right,\n            transparent calc(50% - 1.5px),\n            #d0021b calc(50% - 1.5px),\n            #d0021b calc(50% + 1.5px),\n            transparent calc(50% + 1.5px)\n          );\n        "])));
+});
+/**
+ * A slider's bar inside its reach: the room above and below the bar is still the slider's, so a finger
+ * that lands just off the bar still moves it. The reach itself is clear (the picker paints it white).
+ */
+var sliderStyles = function (track, reach) { return ({
+    height: reach,
+    style: { background: 'transparent', backgroundColor: 'transparent' },
+    bgProps: { style: { inset: "".concat((reach - track) / 2, "px 0"), borderRadius: track / 2 } },
+}); };
+/**
+ * Where a thumb travels: its bar or area, less the half of the thumb - and its ring - that would reach past an end.
+ * A thumb at an end (the area's corner for black or white, the opacity bar's end for an opaque color) was cut by the
+ * area, or by whatever is around the field (qorus#646). Laid out by class, not by an inline style, so the thumb is
+ * still the one element with a `left`.
+ */
+var StyledThumbTrack = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  inset: ", "px ", "px;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  inset: ", "px ", "px;\n  pointer-events: none;\n"])), function (_a) {
+    var $y = _a.$y;
+    return $y;
+}, function (_a) {
+    var $x = _a.$x;
+    return $x;
+});
+/** A slider thumb's ring, past its edge. */
+var THUMB_RING = 1;
+/** An area thumb's rings (white, then dark), past its edge. */
+var AREA_THUMB_RING = 3;
+var StyledThumb = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  width: ", "px;\n  height: ", "px;\n  transform: translate(-50%, -50%);\n  border-radius: 4px;\n  background: #fff;\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.35),\n    0 1px 4px rgba(0, 0, 0, 0.45);\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 50%;\n  width: ", "px;\n  height: ", "px;\n  transform: translate(-50%, -50%);\n  border-radius: 4px;\n  background: #fff;\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.35),\n    0 1px 4px rgba(0, 0, 0, 0.45);\n  pointer-events: none;\n"])), function (_a) {
+    var $width = _a.$width;
+    return $width;
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+});
+var StyledAreaThumb = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  box-shadow:\n    0 0 0 2px #fff,\n    0 0 0 3px rgba(0, 0, 0, 0.4),\n    inset 0 0 1px 1px rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n"], ["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  box-shadow:\n    0 0 0 2px #fff,\n    0 0 0 3px rgba(0, 0, 0, 0.4),\n    inset 0 0 1px 1px rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n"])), function (_a) {
+    var $size = _a.$size;
+    return $size;
+}, function (_a) {
+    var $size = _a.$size;
+    return $size;
+});
+var StyledInputsBlock = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n\n  .reqore-message {\n    margin-top: 6px;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n\n  .reqore-message {\n    margin-top: 6px;\n  }\n"])));
+var StyledInputs = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row wrap;\n  gap: 8px 6px;\n"], ["\n  display: flex;\n  flex-flow: row wrap;\n  gap: 8px 6px;\n"])));
+var StyledInputColumn = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  flex: ", ";\n  min-width: ", "px;\n\n  input {\n    text-align: center;\n    font-variant-numeric: tabular-nums;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  flex: ", ";\n  min-width: ", "px;\n\n  input {\n    text-align: center;\n    font-variant-numeric: tabular-nums;\n  }\n"])), function (_a) {
+    var $grow = _a.$grow, $min = _a.$min;
+    return "".concat($grow, " 1 ").concat($min, "px");
+}, function (_a) {
+    var $min = _a.$min;
+    return $min;
+});
+/* Centred over its input, as the value in the input is. */
+var StyledLabel = styled_components_1.default.label(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  text-align: center;\n  font-size: ", "px;\n  line-height: 1.3;\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  display: block;\n  text-align: center;\n  font-size: ", "px;\n  line-height: 1.3;\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+    var $coarse = _a.$coarse;
+    return ($coarse ? 14 : 12);
+}, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.85);
+});
+var StyledHelp = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n  font-size: ", "px;\n  line-height: 1.45;\n  color: ", ";\n\n  /* the help is one markdown document: its paragraphs are spaced as the field's other parts are */\n  p {\n    margin: 0;\n  }\n  p + p {\n    margin-top: 6px;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n  font-size: ", "px;\n  line-height: 1.45;\n  color: ", ";\n\n  /* the help is one markdown document: its paragraphs are spaced as the field's other parts are */\n  p {\n    margin: 0;\n  }\n  p + p {\n    margin-top: 6px;\n  }\n"])), function (_a) {
+    var $coarse = _a.$coarse;
+    return ($coarse ? 15 : 13);
+}, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.85);
+});
+/**
+ * How far a swatch draws past its edge: its picked ring (2px) and, focused, its outline (2px, 2px off it). The
+ * swatches keep that much room on every side, so a swatch at an edge is drawn whole even where something around the
+ * field cuts off what reaches past it - a picked swatch's ring was cut on its left and bottom in a host's form
+ * (qorus#646).
+ */
+var SWATCH_REACH = 4;
+var StyledSwatches = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row wrap;\n  gap: 8px;\n  padding: 10px ", "px ", "px;\n  border-top: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-flow: row wrap;\n  gap: 8px;\n  padding: 10px ", "px ", "px;\n  border-top: 1px solid ", ";\n"])), SWATCH_REACH, SWATCH_REACH, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.15);
+});
+var StyledSwatch = styled_components_1.default.button(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  padding: 0;\n  border: 0;\n  border-radius: 3px;\n  cursor: pointer;\n  background: ", ";\n  box-shadow: inset 0 0 0 1px ", ";\n\n  &[aria-pressed='true'] {\n    box-shadow:\n      inset 0 0 0 1px ", ",\n      0 0 0 2px ", ";\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  padding: 0;\n  border: 0;\n  border-radius: 3px;\n  cursor: pointer;\n  background: ", ";\n  box-shadow: inset 0 0 0 1px ", ";\n\n  &[aria-pressed='true'] {\n    box-shadow:\n      inset 0 0 0 1px ", ",\n      0 0 0 2px ", ";\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"])), function (_a) {
+    var $size = _a.$size;
+    return $size;
+}, function (_a) {
+    var $size = _a.$size;
+    return $size;
+}, function (_a) {
+    var $color = _a.$color;
+    return $color;
+}, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.25);
+}, function (_a) {
+    var $text = _a.$text;
+    return (0, polished_1.rgba)($text, 0.25);
+}, function (_a) {
+    var $text = _a.$text;
+    return $text;
+}, function (_a) {
+    var $text = _a.$text;
+    return $text;
+});
+/**
+ * The `rgbcolor` field: a color picker that stores `{ r, g, b, a }`.
+ *
+ * It is drawn from the `@uiw` picker's parts - the color square, the hue bar and the opacity bar - and
+ * around them the field's own: a preview of the color, its hex code and its red, green, blue (and
+ * opacity) as labelled inputs that take only what a color can be, a "What do these mean?" help, and
+ * swatches. On a touch screen every target is a finger's size.
+ *
+ * The picker works in hue, saturation and value, and a stored color is red, green and blue. A color the
+ * picker sent comes back as the field's value, and turned back into hue it can lose what the picker had:
+ * a grey has no hue, so moving the saturation to a grey would throw the hue bar back to red. So the color
+ * the picker last showed is kept with the color it sent, and only a value that changed somewhere else is
+ * converted.
+ */
 var ColorFormField = function (_a) {
-    var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, readOnly = _a.readOnly, rest = __rest(_a, ["value", "onChange", "disabled", "readOnly"]);
-    return ((0, jsx_runtime_1.jsx)(exports.StyledSketchPicker, __assign({ onChangeComplete: function (color) { return onChange === null || onChange === void 0 ? void 0 : onChange(color.rgb); }, color: value, readOnly: disabled || readOnly, disableAlpha: true }, rest)));
+    var _b;
+    var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, readOnly = _a.readOnly, _c = _a.disableAlpha, disableAlpha = _c === void 0 ? true : _c, _d = _a.presetColors, presetColors = _d === void 0 ? exports.DEFAULT_COLOR_PRESETS : _d, className = _a.className, labels = _a.labels;
+    var theme = (0, reqore_1.useReqoreTheme)();
+    var text = (0, colors_1.getReadableColor)(theme);
+    var coarse = (0, useCoarsePointer_1.useCoarsePointer)();
+    var sizes = sizesFor(coarse);
+    var words = (0, react_1.useMemo)(function () { return (__assign(__assign({}, exports.DEFAULT_COLOR_FORM_FIELD_LABELS), labels)); }, [labels]);
+    // the help's and the messages' markdown: the host's renderer, or reqraft's own (this is the field's own text)
+    var renderMarkdown = (_b = (0, markdownRendererContext_1.useMarkdownRenderer)()) !== null && _b !== void 0 ? _b : MarkdownView_1.defaultMarkdownRenderer;
+    var id = (0, react_1.useId)();
+    var field = (0, react_1.useRef)(null);
+    var locked = !!(disabled || readOnly);
+    var stored = (0, exports.colorToRgba)(value);
+    var _e = stored !== null && stored !== void 0 ? stored : {}, r = _e.r, g = _e.g, b = _e.b, a = _e.a;
+    /** What the picker last showed after a move of its own, and the color it sent for it. */
+    var _f = (0, react_1.useState)(), picked = _f[0], setPicked = _f[1];
+    /** Text typed into an input that is not (yet) the color: what the input shows instead of the color. */
+    var _g = (0, react_1.useState)({}), drafts = _g[0], setDrafts = _g[1];
+    var _h = (0, react_1.useState)(), problem = _h[0], setProblem = _h[1];
+    var _j = (0, react_1.useState)(false), helpOpen = _j[0], setHelpOpen = _j[1];
+    /** Where the caret goes after characters that could not be typed are left out. */
+    var caret = (0, react_1.useRef)();
+    var shown = (0, react_1.useMemo)(function () {
+        if (!isChannel(r) || !isChannel(g) || !isChannel(b) || !isChannel(a)) {
+            return NO_COLOR;
+        }
+        var rgbaValue = { r: r, g: g, b: b, a: a };
+        return picked && sameRgba(picked.rgba, rgbaValue) ? picked.hsva : (0, color_convert_1.rgbaToHsva)(rgbaValue);
+    }, [r, g, b, a, picked]);
+    /** The color the inputs show: the stored one, or the picker's starting color. */
+    var current = (0, react_1.useMemo)(function () { return (stored ? { r: stored.r, g: stored.g, b: stored.b, a: stored.a } : (0, color_convert_1.hsvaToRgba)(NO_COLOR)); }, [r, g, b, a]);
+    var texts = fieldTexts(current);
+    // `inert` takes the picker out of reach of the pointer, the keyboard and assistive technology at once:
+    // its sliders are focusable and move with the arrow keys. Set on the element, as React 18 and React 19
+    // disagree about the attribute's value.
+    (0, react_1.useEffect)(function () {
+        if (field.current) {
+            field.current.inert = locked;
+        }
+    }, [locked]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (caret.current) {
+            var _a = caret.current, input = _a.input, at = _a.at;
+            caret.current = undefined;
+            if (document.activeElement === input) {
+                input.setSelectionRange(at, at);
+            }
+        }
+    });
+    /**
+     * Store a color. `hsva` is how the picker showed it, when the picker made it: kept, so a grey keeps its
+     * hue. A color typed in keeps the hue (and for black the strength) it cannot say.
+     */
+    var store = (0, react_1.useCallback)(function (next, hsva) {
+        var _a;
+        if (locked) {
+            return;
+        }
+        // Without its slider the transparency is not the picker's to change. It would: a hex code typed in,
+        // or a swatch, is opaque.
+        var color = toStoredColor(__assign(__assign({}, next), { a: disableAlpha ? ((_a = stored === null || stored === void 0 ? void 0 : stored.a) !== null && _a !== void 0 ? _a : 1) : next.a }));
+        var showAs = hsva !== null && hsva !== void 0 ? hsva : (0, color_convert_1.rgbaToHsva)(color);
+        if (!hsva) {
+            showAs =
+                showAs.v === 0 ? __assign(__assign({}, showAs), { h: shown.h, s: shown.s }) : showAs.s === 0 ? __assign(__assign({}, showAs), { h: shown.h }) : showAs;
+        }
+        setPicked({ rgba: color, hsva: __assign(__assign({}, showAs), { a: color.a }) });
+        // A hue moved on a grey is the same color: nothing to store - unless the value is not stored as a color
+        // is (a hex code, `{ hex }`, a channel past its range): an edit stores it as one (qorus#646, David).
+        if (stored && sameRgba(stored, color) && (0, colorValue_1.isStoredColor)(value)) {
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+    }, [locked, disableAlpha, stored, shown, onChange, value]);
+    var pickerMoved = (0, react_1.useCallback)(function (hsva) { return store((0, color_convert_1.hsvaToRgba)(hsva), hsva); }, [store]);
+    var setDraft = function (name, draft) {
+        return setDrafts(function (was) {
+            var next = __assign({}, was);
+            if (draft === undefined) {
+                delete next[name];
+            }
+            else {
+                next[name] = draft;
+            }
+            return next;
+        });
+    };
+    var fieldName = function (name) {
+        return name === 'hex' ? words.hex
+            : name === 'r' ? words.red
+                : name === 'g' ? words.green
+                    : name === 'b' ? words.blue
+                        : words.opacity.replace(/\s*%$/, '');
+    };
+    /** The color with one input's number in it. */
+    var withChannel = function (name, n) {
+        var _a;
+        return name === 'a' ? __assign(__assign({}, current), { a: n / 100 }) : __assign(__assign({}, current), (_a = {}, _a[name] = n, _a));
+    };
+    var typed = function (name) { return function (event) {
+        if (locked) {
+            return;
+        }
+        var input = event.target;
+        var _a = keepValid(name, input.value), kept = _a.kept, dropped = _a.dropped, long = _a.long;
+        if (dropped && input.selectionStart !== null) {
+            // the caret stays after what was typed, not at the end
+            var before = keepValid(name, input.value.slice(0, input.selectionStart)).kept.length;
+            caret.current = { input: input, at: before };
+        }
+        setDraft(name, kept);
+        var message;
+        if (dropped) {
+            message = name === 'hex' ? words.notHex(dropped) : words.notDigits(dropped, fieldName(name));
+        }
+        else if (long && name === 'hex') {
+            message = words.hexTooLong;
+        }
+        if (name === 'hex') {
+            // Six characters are a color as they are typed; three may be the start of six, so they are one
+            // when the field is left (see `committed`).
+            var typedColor = kept.length === 6 ? (0, colorValue_1.readHexColor)(kept) : undefined;
+            if (typedColor) {
+                store(__assign(__assign({}, typedColor), { a: current.a }));
+            }
+            setProblem(message ? { field: name, message: message, invalid: false } : undefined);
+            return;
+        }
+        var max = CHANNEL_MAX[name];
+        if (kept === '') {
+            setProblem(message ? { field: name, message: message, invalid: true } : undefined);
+            return;
+        }
+        var n = Number(kept);
+        if (n > max) {
+            var range = words.outOfRange(fieldName(name), max);
+            setProblem({ field: name, message: message ? "".concat(message, " ").concat(range) : range, invalid: true });
+            return;
+        }
+        store(withChannel(name, n));
+        setProblem(message ? { field: name, message: message, invalid: false } : undefined);
+    }; };
+    /** The field was left, or Enter pressed in it: what it holds is a color, or it shows the color again. */
+    var committed = function (name) {
+        var draft = drafts[name];
+        if (draft === undefined) {
+            return;
+        }
+        setDraft(name, undefined);
+        if (name === 'hex') {
+            var shortColor = draft.length === 3 ? (0, colorValue_1.readHexColor)(draft) : undefined;
+            if (shortColor) {
+                store(__assign(__assign({}, shortColor), { a: current.a }));
+            }
+            else if (draft === '') {
+                setProblem({ field: name, message: words.hexEmpty, invalid: false });
+            }
+            else if (draft.length !== 6) {
+                setProblem({ field: name, message: words.hexLength(draft), invalid: false });
+            }
+            return;
+        }
+        var max = CHANNEL_MAX[name];
+        if (draft === '') {
+            setProblem({ field: name, message: words.empty(fieldName(name), max), invalid: false });
+        }
+        else if (Number(draft) > max) {
+            setProblem({ field: name, message: words.outOfRange(fieldName(name), max), invalid: false });
+        }
+    };
+    var keyDown = function (name) { return function (event) {
+        var _a;
+        if (event.key === 'Enter') {
+            committed(name);
+            return;
+        }
+        if (name === 'hex' || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) {
+            return;
+        }
+        // a number steps with the arrow keys, by ten with Shift, and stays in its range
+        event.preventDefault();
+        var step = (event.key === 'ArrowUp' ? 1 : -1) * (event.shiftKey ? 10 : 1);
+        var from = Number((_a = drafts[name]) !== null && _a !== void 0 ? _a : texts[name]);
+        var n = clamp((Number.isFinite(from) ? Math.min(from, CHANNEL_MAX[name]) : 0) + step, 0, CHANNEL_MAX[name]);
+        setDraft(name, undefined);
+        setProblem(undefined);
+        store(withChannel(name, n));
+    }; };
+    var inputFor = function (name, label, grow, min) {
+        var _a;
+        var inputId = "".concat(id, "-").concat(name);
+        var invalid = (problem === null || problem === void 0 ? void 0 : problem.field) === name && problem.invalid;
+        return ((0, jsx_runtime_1.jsxs)(StyledInputColumn, { "$grow": grow, "$min": min, children: [(0, jsx_runtime_1.jsx)(StyledLabel, { htmlFor: inputId, "$text": text, "$coarse": coarse, children: label }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreInput, { id: inputId, className: "reqraft-color-field-".concat(name), "data-field": name, size: coarse ? 'big' : 'normal', fluid: true, value: (_a = drafts[name]) !== null && _a !== void 0 ? _a : texts[name], intent: invalid ? 'danger' : undefined, "aria-invalid": invalid || undefined, "aria-describedby": (problem === null || problem === void 0 ? void 0 : problem.field) === name ? "".concat(id, "-problem") : undefined, inputMode: name === 'hex' ? 'text' : 'numeric', autoCapitalize: name === 'hex' ? 'characters' : 'off', autoComplete: 'off', autoCorrect: 'off', spellCheck: false, onChange: typed(name), onBlur: function () { return committed(name); }, onKeyDown: keyDown(name) })] }, name));
+    };
+    var shownRgba = (0, color_convert_1.hsvaToRgba)(shown);
+    var opacityPercent = Math.round(current.a * 100);
+    var previewColor = stored ? "rgba(".concat(stored.r, ", ").concat(stored.g, ", ").concat(stored.b, ", ").concat(stored.a, ")") : undefined;
+    var colorOpaque = "rgb(".concat(shownRgba.r, ", ").concat(shownRgba.g, ", ").concat(shownRgba.b, ")");
+    var slider = sliderStyles(sizes.track, sizes.reach);
+    var thumbWidth = coarse ? 14 : 8;
+    var thumb = (0, react_1.useCallback)(function (_a) {
+        var left = _a.left;
+        return ((0, jsx_runtime_1.jsx)(StyledThumbTrack, { "$x": thumbWidth / 2 + THUMB_RING, "$y": 0, children: (0, jsx_runtime_1.jsx)(StyledThumb, { className: 'reqraft-color-field-thumb', style: { left: left }, "$height": sizes.track + 6, "$width": thumbWidth }) }));
+    }, [sizes.track, thumbWidth]);
+    var areaThumbSize = coarse ? 28 : 14;
+    var areaThumb = (0, react_1.useCallback)(function (_a) {
+        var left = _a.left, top = _a.top, color = _a.color;
+        return ((0, jsx_runtime_1.jsx)(StyledThumbTrack, { "$x": areaThumbSize / 2 + AREA_THUMB_RING, "$y": areaThumbSize / 2 + AREA_THUMB_RING, children: (0, jsx_runtime_1.jsx)(StyledAreaThumb, { className: 'reqraft-color-field-area-thumb', style: { left: left, top: top, background: color }, "$size": areaThumbSize }) }));
+    }, [areaThumbSize]);
+    var presets = presetColors === false ? [] : presetColors;
+    var currentHex = "#".concat(texts.hex);
+    return ((0, jsx_runtime_1.jsxs)(exports.StyledColorField, { ref: field, className: className ? "reqraft-color-field ".concat(className) : 'reqraft-color-field', "aria-disabled": locked || undefined, "$disabled": !!disabled, "$text": text, children: [(0, jsx_runtime_1.jsx)(StyledArea, { "$height": sizes.area, "$text": text, children: (0, jsx_runtime_1.jsx)(react_color_saturation_1.default, { hsva: shown, onChange: pickerMoved, pointer: areaThumb, style: { width: '100%', height: '100%' }, role: 'slider', "aria-label": words.area, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(shown.s), "aria-valuetext": "".concat(Math.round(shown.s), "%, ").concat(Math.round(shown.v), "%") }) }), (0, jsx_runtime_1.jsxs)(StyledSliders, { children: [(0, jsx_runtime_1.jsx)(StyledPreview, { className: 'reqraft-color-field-preview', role: 'img', "aria-label": stored ? words.preview(currentHex, opacityPercent) : words.noColor, "$size": sizes.preview, "$text": text, "$color": previewColor }), (0, jsx_runtime_1.jsxs)(StyledSliderStack, { children: [(0, jsx_runtime_1.jsx)(react_color_hue_1.default, { className: 'reqraft-color-field-hue', hue: shown.h, width: '100%', height: slider.height, style: slider.style, bgProps: slider.bgProps, pointer: thumb, innerProps: {
+                                    role: 'slider',
+                                    'aria-label': words.hue,
+                                    'aria-valuemin': 0,
+                                    'aria-valuemax': 360,
+                                    'aria-valuenow': Math.round(shown.h),
+                                }, onChange: function (_a) {
+                                    var h = _a.h;
+                                    return pickerMoved(__assign(__assign({}, shown), { h: h }));
+                                } }), !disableAlpha && ((0, jsx_runtime_1.jsx)(react_color_alpha_1.default, { className: 'reqraft-color-field-alpha', hsva: shown, width: '100%', height: slider.height, style: slider.style, bgProps: {
+                                    style: __assign(__assign({}, slider.bgProps.style), { background: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(colorOpaque, "), url(").concat(react_color_alpha_1.BACKGROUND_IMG, ") left center #fff") }),
+                                }, pointer: thumb, innerProps: {
+                                    role: 'slider',
+                                    'aria-label': fieldName('a'),
+                                    'aria-valuemin': 0,
+                                    'aria-valuemax': 100,
+                                    'aria-valuenow': Math.round(shown.a * 100),
+                                }, onChange: function (_a) {
+                                    var alpha = _a.a;
+                                    return pickerMoved(__assign(__assign({}, shown), { a: alpha }));
+                                } }))] })] }), (0, jsx_runtime_1.jsxs)(StyledInputsBlock, { children: [(0, jsx_runtime_1.jsxs)(StyledInputs, { children: [inputFor('hex', words.hex, 2, coarse ? 96 : 80), inputFor('r', words.red, 1, coarse ? 52 : 44), inputFor('g', words.green, 1, coarse ? 52 : 44), inputFor('b', words.blue, 1, coarse ? 52 : 44), !disableAlpha && inputFor('a', words.opacity, 1, coarse ? 64 : 56)] }), (0, jsx_runtime_1.jsx)("div", { id: "".concat(id, "-problem"), "aria-live": 'polite', className: 'reqraft-color-field-problem', children: problem && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { intent: 'danger', size: 'small', opaque: false, children: renderMarkdown({ value: problem.message, compact: true }) })) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'reqraft-color-field-help-toggle', icon: 'QuestionLine', size: coarse ? 'big' : 'small', flat: true, minimal: true, fixed: true, "aria-expanded": helpOpen, "aria-controls": "".concat(id, "-help"), onClick: function () { return setHelpOpen(function (open) { return !open; }); }, children: words.help }) }), helpOpen && ((0, jsx_runtime_1.jsx)(StyledHelp, { id: "".concat(id, "-help"), className: 'reqraft-color-field-help', "$text": text, "$coarse": coarse, children: renderMarkdown({
+                    value: __spreadArray([
+                        words.helpArea,
+                        words.helpHex,
+                        words.helpChannels
+                    ], (disableAlpha ? [] : [words.helpOpacity]), true).join('\n\n'),
+                    compact: !coarse,
+                }) })), presets.length > 0 && ((0, jsx_runtime_1.jsx)(StyledSwatches, { className: 'reqraft-color-field-swatches', "$text": text, children: presets.map(function (preset) {
+                    var _a;
+                    var color = typeof preset === 'string' ? preset : preset.color;
+                    var title = typeof preset === 'string' ? preset : ((_a = preset.title) !== null && _a !== void 0 ? _a : preset.color);
+                    var rgbaColor = (0, exports.colorToRgba)(color);
+                    return ((0, jsx_runtime_1.jsx)(StyledSwatch, { type: 'button', className: 'reqraft-color-field-swatch', "data-color": color.toUpperCase(), "aria-label": words.swatch(title), "aria-pressed": !!stored && !!rgbaColor && hexOf(rgbaColor) === hexOf(stored), disabled: !rgbaColor, "$size": sizes.swatch, "$color": color, "$text": text, onClick: function () {
+                            if (rgbaColor) {
+                                setDrafts({});
+                                setProblem(undefined);
+                                // a swatch is a color: the opacity stays as it was
+                                store(__assign(__assign({}, rgbaColor), { a: current.a }));
+                            }
+                        } }, color));
+                }) }))] }));
 };
 exports.ColorFormField = ColorFormField;
 exports.default = exports.ColorFormField;
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
 //# sourceMappingURL=Color.js.map