@qoretechnologies/reqraft 0.10.62 → 0.10.63-pr.137.g38d812a

package/README.md

@@ -77,7 +77,7 @@ The ref exposes `format()`, `validate()`, `parse(text)`, and `serialize(expressi
 
 ### `SmartEditor`
 
-The generic Slate-based editor primitive that `DpqlEditor` wraps. Knows nothing about any specific language — instead it takes a caller-owned LSP session (`useLspSession`) plus a set of language-flavour props (`decorate`, `customRenderLeaf`, `tagRenderer`, `triggerCharacters`, `converter`, `completionInserter`, `topActions`). The same primitive can drive a DPQL editor, a Qonsole command input, or any other LSP-backed text field.
+The generic Slate-based editor primitive that `DpqlEditor` wraps. Knows nothing about any specific language — instead it takes a caller-owned LSP session (`useLspSession`) plus a set of language-flavor props (`decorate`, `customRenderLeaf`, `tagRenderer`, `triggerCharacters`, `converter`, `completionInserter`, `topActions`). The same primitive can drive a DPQL editor, a Qonsole command input, or any other LSP-backed text field.
 
 ```tsx
 import { SmartEditor, useLspSession } from '@qoretechnologies/reqraft';
@@ -148,6 +148,26 @@ client.onNotification('qonsole/sessionStateChanged', (params) => { /* … */ });
 client.disconnect();
 ```
 
+### `ReqraftColorValue`
+
+A stored color, read-only: a swatch painted the color, beside the color written out (`#6495ED`, or `rgba(255, 0, 0, 0.5)` when it is see-through), on a wash of the color. A compact form row draws its colors with it, so a page and a form show a color the same way.
+
+```tsx
+import { ReqraftColorValue } from '@qoretechnologies/reqraft';
+
+<ReqraftColorValue value={{ r: 100, g: 149, b: 237 }} />            // detail page
+<ReqraftColorValue value={option.value} size='compact' />           // one-line summary (row, cell)
+```
+
+- **Values:** `{ r, g, b }`, `{ r, g, b, a }` (as the color field stores it), `{ hex }`, or a hex code of 3, 4, 6 or 8 digits, with or without its `#`. A channel past its range is brought into it, as the color field does.
+- **A stored color** is `{ r, g, b, a? }` and nothing more: `r`, `g` and `b` whole numbers from 0 to 255, `a` its opacity from 0 to 1 (none: opaque). A hex code, bare or as `{ hex }`, and a color with another field beside its own (`{ r, g, b, hex }`, which the server refuses), are drawn so a value stored that way is seen, but they are not stored colors: the `rgbcolor` validator says what is wrong (`storedColorProblem(value)`), and the color field stores the hash, and only the hash, when it edits such a value.
+- **A value that is not a color** (`#zzz`, `red`, a channel that is not a number) draws no swatch: it says what the value is ("Not a color: “#zzz”"). With no value it says "No color".
+- **Sizes:** `normal` (default; a 20px swatch over a checkerboard, so transparency shows; the text wraps) and `compact` (a 12px swatch; one line ending in an ellipsis). `wrap` overrides the line behavior.
+- **Accessible:** the color is text (it reads, copies and is found like any text); the swatch is an image named for the color ("Color #6495ED").
+- **Words:** `labels` replaces any of `swatch(color)`, `invalid(shown)` and `empty` for a host that translates its interface.
+
+`describeColorValue(value)` is the reader on its own: `{ kind: 'color', text, css }`, `{ kind: 'invalid', shown }` or `{ kind: 'empty' }`.
+
 ## Tracking, consent and A/B testing
 
 First-party analytics with a consent gate and client-side A/B testing, for any Qore web app. The core is plain TypeScript with no DOM, the browser layer attaches the listeners, and the React bindings sit on top. Everything product-specific comes in through config; the server keeps each product's data separate by `property`.

package/dist/components/Description/describedControl.d.ts

@@ -0,0 +1,54 @@
+import { IReqorePanelAction } from '@qoretechnologies/reqore/dist/components/Panel';
+import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
+import { TReqoreTooltipProp } from '@qoretechnologies/reqore/dist/types/global';
+import { Key, ReactElement } from 'react';
+import { IDescriptionTooltipOptions } from '../../helpers/descriptionTooltip';
+/** What the ⓘ is called, for a screen reader: the thing it explains. */
+export declare const describedControlInfoLabel: (name: string) => string;
+export interface IDescriptionInfoButtonProps {
+    /** The description it opens: the server's markdown, drawn as every description card is. */
+    description: string;
+    /** What it describes: the card's title and the button's accessible name. */
+    name: string;
+    descriptions: IDescriptionTooltipOptions;
+    /** The size of the group it is in, which a control group hands its children: the control beside it has it too. */
+    size?: TSizes;
+}
+/**
+ * A finger's way to a control's description: a small ⓘ beside the control that opens its card on a tap. A tap on
+ * the control itself does what the control does, and only that.
+ *
+ * It is the size of the control it sits beside: no size of its own, so it takes the group's, as the control does.
+ * A fixed big one (48px) beside a small checkbox read as the main thing in the row (Foxhoundn, qlip #361).
+ */
+export declare const DescriptionInfoButton: import("react").MemoExoticComponent<({ description, name, descriptions, size }: IDescriptionInfoButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export interface IDescribedControl {
+    /** The control's own hover, with a mouse. None on a touch screen, where a tap is the control's own. */
+    tooltip?: TReqoreTooltipProp;
+    /** The ⓘ to put beside the control, on a touch screen. */
+    info?: ReactElement;
+    /** The same ⓘ as a panel's header action, for a control that is a panel. */
+    infoAction?: IReqorePanelAction;
+}
+/**
+ * How a control that does something when tapped - a checkbox, a tab, a collapsible section - shows its description.
+ *
+ * With a mouse, as its hover card. On a touch screen (`descriptions.tapToOpen`), never on the control: a tap there
+ * ticked the box or switched the tab and opened the card at once. The card opens from an ⓘ beside the control
+ * instead (`info`, or `infoAction` for a panel's header). A control with no description gets neither.
+ */
+export declare const describedControl: (description: unknown, descriptions: IDescriptionTooltipOptions, name: string) => IDescribedControl;
+/**
+ * A control with its ⓘ beside it, in one row, keyed as the control was; the control alone where there is no ⓘ
+ * (a mouse, or no description).
+ */
+export declare const besideItsInfo: (control: ReactElement, info: ReactElement | undefined, key: Key) => ReactElement;
+/**
+ * A collapsible section's description, as props for its `ReqorePanel`: with a mouse its header's hover, on a touch
+ * screen an ⓘ among its header's actions, so a tap on the header only opens or closes it.
+ */
+export declare const describedPanelProps: (description: unknown, descriptions: IDescriptionTooltipOptions, name: string) => {
+    tooltip?: TReqoreTooltipProp;
+    actions?: IReqorePanelAction[];
+};
+//# sourceMappingURL=describedControl.d.ts.map

package/dist/components/Description/describedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"describedControl.d.ts","sourceRoot":"","sources":["../../../src/components/Description/describedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAgB,GAAG,EAAQ,YAAY,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAsB,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAElG,wEAAwE;AACxE,eAAO,MAAM,yBAAyB,SAAU,MAAM,WAAoB,CAAC;AAE3E,MAAM,WAAW,2BAA2B;IAC1C,2FAA2F;IAC3F,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,0BAA0B,CAAC;IACzC,kHAAkH;IAClH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,kFACY,2BAA2B,6CAYxE,CAAC;AAIF,MAAM,WAAW,iBAAiB;IAChC,uGAAuG;IACvG,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,gBACd,OAAO,gBACN,0BAA0B,QAClC,MAAM,KACX,iBAkBF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,YACf,YAAY,QACf,YAAY,GAAG,SAAS,OACzB,GAAG,KACP,YAM+B,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,gBACjB,OAAO,gBACN,0BAA0B,QAClC,MAAM,KACX;IAAE,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAAC,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAGhE,CAAC"}

package/dist/components/Description/describedControl.js

@@ -0,0 +1,81 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.describedPanelProps = exports.besideItsInfo = exports.describedControl = exports.DescriptionInfoButton = exports.describedControlInfoLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2026 Qore Technologies, s.r.o.
+var reqore_1 = require("@qoretechnologies/reqore");
+var react_1 = require("react");
+var descriptionTooltip_1 = require("../../helpers/descriptionTooltip");
+/** What the ⓘ is called, for a screen reader: the thing it explains. */
+var describedControlInfoLabel = function (name) { return "About ".concat(name); };
+exports.describedControlInfoLabel = describedControlInfoLabel;
+/**
+ * A finger's way to a control's description: a small ⓘ beside the control that opens its card on a tap. A tap on
+ * the control itself does what the control does, and only that.
+ *
+ * It is the size of the control it sits beside: no size of its own, so it takes the group's, as the control does.
+ * A fixed big one (48px) beside a small checkbox read as the main thing in the row (Foxhoundn, qlip #361).
+ */
+exports.DescriptionInfoButton = (0, react_1.memo)(function (_a) {
+    var description = _a.description, name = _a.name, descriptions = _a.descriptions, size = _a.size;
+    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'reqraft-description-info', icon: 'InformationLine', size: size, minimal: true, flat: true, fixed: true, "aria-label": (0, exports.describedControlInfoLabel)(name), tooltip: (0, descriptionTooltip_1.descriptionTooltip)(description, __assign(__assign({}, descriptions), { tapToOpen: true }), name) }));
+});
+exports.DescriptionInfoButton.displayName = 'DescriptionInfoButton';
+/**
+ * How a control that does something when tapped - a checkbox, a tab, a collapsible section - shows its description.
+ *
+ * With a mouse, as its hover card. On a touch screen (`descriptions.tapToOpen`), never on the control: a tap there
+ * ticked the box or switched the tab and opened the card at once. The card opens from an ⓘ beside the control
+ * instead (`info`, or `infoAction` for a panel's header). A control with no description gets neither.
+ */
+var describedControl = function (description, descriptions, name) {
+    if (!descriptions.tapToOpen) {
+        return { tooltip: (0, descriptionTooltip_1.descriptionTooltip)(description, descriptions) };
+    }
+    if (typeof description !== 'string' || !description.trim()) {
+        return {};
+    }
+    return {
+        info: (0, jsx_runtime_1.jsx)(exports.DescriptionInfoButton, { description: description, name: name, descriptions: descriptions }),
+        infoAction: {
+            className: 'reqraft-description-info',
+            icon: 'InformationLine',
+            minimal: true,
+            flat: true,
+            'aria-label': (0, exports.describedControlInfoLabel)(name),
+            tooltip: (0, descriptionTooltip_1.descriptionTooltip)(description, __assign(__assign({}, descriptions), { tapToOpen: true }), name),
+        },
+    };
+};
+exports.describedControl = describedControl;
+/**
+ * A control with its ⓘ beside it, in one row, keyed as the control was; the control alone where there is no ⓘ
+ * (a mouse, or no description).
+ */
+var besideItsInfo = function (control, info, key) {
+    return info ?
+        (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { className: 'reqraft-described-control', gapSize: 'tiny', children: [control, info] }, key)
+        : (0, react_1.cloneElement)(control, { key: key });
+};
+exports.besideItsInfo = besideItsInfo;
+/**
+ * A collapsible section's description, as props for its `ReqorePanel`: with a mouse its header's hover, on a touch
+ * screen an ⓘ among its header's actions, so a tap on the header only opens or closes it.
+ */
+var describedPanelProps = function (description, descriptions, name) {
+    var _a = (0, exports.describedControl)(description, descriptions, name), tooltip = _a.tooltip, infoAction = _a.infoAction;
+    return __assign({ tooltip: tooltip }, (infoAction ? { actions: [infoAction] } : {}));
+};
+exports.describedPanelProps = describedPanelProps;
+//# sourceMappingURL=describedControl.js.map

package/dist/components/Description/describedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"describedControl.js","sourceRoot":"","sources":["../../../src/components/Description/describedControl.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,2CAA2C;AAC3C,mDAA4E;AAI5E,+BAA8D;AAC9D,uEAAkG;AAElG,wEAAwE;AACjE,IAAM,yBAAyB,GAAG,UAAC,IAAY,IAAK,OAAA,gBAAS,IAAI,CAAE,EAAf,CAAe,CAAC;AAA9D,QAAA,yBAAyB,6BAAqC;AAY3E;;;;;;GAMG;AACU,QAAA,qBAAqB,GAAG,IAAA,YAAI,EACvC,UAAC,EAAsE;QAApE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAA,EAAE,IAAI,UAAA;IAAoC,OAAA,CAC1E,uBAAC,qBAAY,IACX,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,QACP,IAAI,QACJ,KAAK,sBACO,IAAA,iCAAyB,EAAC,IAAI,CAAC,EAC3C,OAAO,EAAE,IAAA,uCAAkB,EAAC,WAAW,wBAAO,YAAY,KAAE,SAAS,EAAE,IAAI,KAAI,IAAI,CAAC,GACpF,CACH;AAX2E,CAW3E,CACF,CAAC;AAEF,6BAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAW5D;;;;;;GAMG;AACI,IAAM,gBAAgB,GAAG,UAC9B,WAAoB,EACpB,YAAwC,EACxC,IAAY;IAEZ,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC;QAC5B,OAAO,EAAE,OAAO,EAAE,IAAA,uCAAkB,EAAC,WAAW,EAAE,YAAY,CAAC,EAAE,CAAC;IACpE,CAAC;IACD,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,CAAC;QAC3D,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO;QACL,IAAI,EAAE,uBAAC,6BAAqB,IAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,GAAI;QACjG,UAAU,EAAE;YACV,SAAS,EAAE,0BAA0B;YACrC,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,IAAI;YACV,YAAY,EAAE,IAAA,iCAAyB,EAAC,IAAI,CAAC;YAC7C,OAAO,EAAE,IAAA,uCAAkB,EAAC,WAAW,wBAAO,YAAY,KAAE,SAAS,EAAE,IAAI,KAAI,IAAI,CAAC;SAC/D;KACxB,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,gBAAgB,oBAsB3B;AAEF;;;GAGG;AACI,IAAM,aAAa,GAAG,UAC3B,OAAqB,EACrB,IAA8B,EAC9B,GAAQ;IAER,OAAA,IAAI,CAAC,CAAC;QACJ,wBAAC,2BAAkB,IAAW,SAAS,EAAC,2BAA2B,EAAC,OAAO,EAAC,MAAM,aAC/E,OAAO,EACP,IAAI,KAFkB,GAAG,CAGP;QACvB,CAAC,CAAC,IAAA,oBAAY,EAAC,OAAO,EAAE,EAAE,GAAG,KAAA,EAAE,CAAC;AALhC,CAKgC,CAAC;AAVtB,QAAA,aAAa,iBAUS;AAEnC;;;GAGG;AACI,IAAM,mBAAmB,GAAG,UACjC,WAAoB,EACpB,YAAwC,EACxC,IAAY;IAEN,IAAA,KAA0B,IAAA,wBAAgB,EAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,EAAzE,OAAO,aAAA,EAAE,UAAU,gBAAsD,CAAC;IAClF,kBAAS,OAAO,SAAA,IAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAG;AACvE,CAAC,CAAC;AAPW,QAAA,mBAAmB,uBAO9B"}

package/dist/components/Description/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Description/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAW,MAAM,oDAAoD,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAM1D,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoHD,eAAO,MAAM,YAAY,UAAW,GAAG,4CAQtC,CAAC;AAEF,eAAO,MAAM,WAAW,oMAWnB,iBAAiB,6CA6FrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Description/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAW,MAAM,oDAAoD,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAO1D,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoHD,eAAO,MAAM,YAAY,UAAW,GAAG,4CAQtC,CAAC;AAEF,eAAO,MAAM,WAAW,oMAWnB,iBAAiB,6CA8FrB,CAAC"}

package/dist/components/Description/index.js

@@ -36,6 +36,7 @@ var Paragraph_1 = require("@qoretechnologies/reqore/dist/components/Paragraph");
 var react_1 = require("react");
 var react_markdown_1 = __importDefault(require("react-markdown"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var markdownText_1 = require("../../helpers/markdownText");
 var markdownRendererContext_1 = require("./markdownRendererContext");
 /**
  * System monospace, spelled out rather than imported from
@@ -51,7 +52,7 @@ var MONO_FONT = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberat
  * `styled(ReactMarkdown)` — hence a wrapper element rather than a styled
  * component around the renderer itself.
  */
-var StyledDescriptionMarkdown = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /*\n   * Inline code. A backtick span marks an identifier \u2014 an option key, a header\n   * name, a path \u2014 so it has to be monospace, and it has to sit quietly inside\n   * the sentence around it.\n   *\n   * This used to map the code element to a ReqoreTag with an explicit near-white\n   * colour, which auto-contrasted to near-black text: on a dark form a description\n   * full of option names read as a row of glaring labels rather than as prose with\n   * identifiers in it. Keeping the reading colour and tinting the background\n   * behind it says \"literal\" without shouting it.\n   */\n  code {\n    font-family: ", ";\n    font-size: 0.92em;\n    background: rgba(255, 255, 255, 0.09);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 3px;\n    padding: 0.05em 0.35em;\n    color: inherit;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  /* Block code owns the whole pre surface; it must not also be chipped. */\n  pre {\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n  pre code {\n    background: none;\n    border: 0;\n    padding: 0;\n    font-size: 1em;\n  }\n\n  /*\n   * Headings. These used to map to ReqoreH1\u2026ReqoreH6, which render at page-title\n   * scale \u2014 an option description opening with a level-two heading came out\n   * larger than the dialog title above it. A description is never a page, so the\n   * scale here is relative to the text it interrupts.\n   */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: ", ";\n    line-height: 1.3;\n    font-weight: 600;\n  }\n\n  > h1:first-child,\n  > h2:first-child,\n  > h3:first-child,\n  > h4:first-child,\n  > h5:first-child,\n  > h6:first-child {\n    margin-top: 0;\n  }\n\n  h1 {\n    font-size: ", ";\n  }\n  h2 {\n    font-size: ", ";\n  }\n  h3 {\n    font-size: ", ";\n  }\n  h4,\n  h5,\n  h6 {\n    font-size: 1em;\n    opacity: 0.85;\n  }\n\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n\n  ul,\n  ol {\n    margin: 4px 0;\n    padding-left: 20px;\n  }\n  li {\n    margin: 2px 0;\n  }\n"], ["\n  /*\n   * Inline code. A backtick span marks an identifier \u2014 an option key, a header\n   * name, a path \u2014 so it has to be monospace, and it has to sit quietly inside\n   * the sentence around it.\n   *\n   * This used to map the code element to a ReqoreTag with an explicit near-white\n   * colour, which auto-contrasted to near-black text: on a dark form a description\n   * full of option names read as a row of glaring labels rather than as prose with\n   * identifiers in it. Keeping the reading colour and tinting the background\n   * behind it says \"literal\" without shouting it.\n   */\n  code {\n    font-family: ", ";\n    font-size: 0.92em;\n    background: rgba(255, 255, 255, 0.09);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 3px;\n    padding: 0.05em 0.35em;\n    color: inherit;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  /* Block code owns the whole pre surface; it must not also be chipped. */\n  pre {\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n  pre code {\n    background: none;\n    border: 0;\n    padding: 0;\n    font-size: 1em;\n  }\n\n  /*\n   * Headings. These used to map to ReqoreH1\u2026ReqoreH6, which render at page-title\n   * scale \u2014 an option description opening with a level-two heading came out\n   * larger than the dialog title above it. A description is never a page, so the\n   * scale here is relative to the text it interrupts.\n   */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: ", ";\n    line-height: 1.3;\n    font-weight: 600;\n  }\n\n  > h1:first-child,\n  > h2:first-child,\n  > h3:first-child,\n  > h4:first-child,\n  > h5:first-child,\n  > h6:first-child {\n    margin-top: 0;\n  }\n\n  h1 {\n    font-size: ", ";\n  }\n  h2 {\n    font-size: ", ";\n  }\n  h3 {\n    font-size: ", ";\n  }\n  h4,\n  h5,\n  h6 {\n    font-size: 1em;\n    opacity: 0.85;\n  }\n\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n\n  ul,\n  ol {\n    margin: 4px 0;\n    padding-left: 20px;\n  }\n  li {\n    margin: 2px 0;\n  }\n"])), MONO_FONT, function (_a) {
+var StyledDescriptionMarkdown = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /*\n   * Inline code. A backtick span marks an identifier \u2014 an option key, a header\n   * name, a path \u2014 so it has to be monospace, and it has to sit quietly inside\n   * the sentence around it.\n   *\n   * This used to map the code element to a ReqoreTag with an explicit near-white\n   * color, which auto-contrasted to near-black text: on a dark form a description\n   * full of option names read as a row of glaring labels rather than as prose with\n   * identifiers in it. Keeping the reading color and tinting the background\n   * behind it says \"literal\" without shouting it.\n   */\n  code {\n    font-family: ", ";\n    font-size: 0.92em;\n    background: rgba(255, 255, 255, 0.09);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 3px;\n    padding: 0.05em 0.35em;\n    color: inherit;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  /* Block code owns the whole pre surface; it must not also be chipped. */\n  pre {\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n  pre code {\n    background: none;\n    border: 0;\n    padding: 0;\n    font-size: 1em;\n  }\n\n  /*\n   * Headings. These used to map to ReqoreH1\u2026ReqoreH6, which render at page-title\n   * scale \u2014 an option description opening with a level-two heading came out\n   * larger than the dialog title above it. A description is never a page, so the\n   * scale here is relative to the text it interrupts.\n   */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: ", ";\n    line-height: 1.3;\n    font-weight: 600;\n  }\n\n  > h1:first-child,\n  > h2:first-child,\n  > h3:first-child,\n  > h4:first-child,\n  > h5:first-child,\n  > h6:first-child {\n    margin-top: 0;\n  }\n\n  h1 {\n    font-size: ", ";\n  }\n  h2 {\n    font-size: ", ";\n  }\n  h3 {\n    font-size: ", ";\n  }\n  h4,\n  h5,\n  h6 {\n    font-size: 1em;\n    opacity: 0.85;\n  }\n\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n\n  ul,\n  ol {\n    margin: 4px 0;\n    padding-left: 20px;\n  }\n  li {\n    margin: 2px 0;\n  }\n"], ["\n  /*\n   * Inline code. A backtick span marks an identifier \u2014 an option key, a header\n   * name, a path \u2014 so it has to be monospace, and it has to sit quietly inside\n   * the sentence around it.\n   *\n   * This used to map the code element to a ReqoreTag with an explicit near-white\n   * color, which auto-contrasted to near-black text: on a dark form a description\n   * full of option names read as a row of glaring labels rather than as prose with\n   * identifiers in it. Keeping the reading color and tinting the background\n   * behind it says \"literal\" without shouting it.\n   */\n  code {\n    font-family: ", ";\n    font-size: 0.92em;\n    background: rgba(255, 255, 255, 0.09);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 3px;\n    padding: 0.05em 0.35em;\n    color: inherit;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  /* Block code owns the whole pre surface; it must not also be chipped. */\n  pre {\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n  pre code {\n    background: none;\n    border: 0;\n    padding: 0;\n    font-size: 1em;\n  }\n\n  /*\n   * Headings. These used to map to ReqoreH1\u2026ReqoreH6, which render at page-title\n   * scale \u2014 an option description opening with a level-two heading came out\n   * larger than the dialog title above it. A description is never a page, so the\n   * scale here is relative to the text it interrupts.\n   */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: ", ";\n    line-height: 1.3;\n    font-weight: 600;\n  }\n\n  > h1:first-child,\n  > h2:first-child,\n  > h3:first-child,\n  > h4:first-child,\n  > h5:first-child,\n  > h6:first-child {\n    margin-top: 0;\n  }\n\n  h1 {\n    font-size: ", ";\n  }\n  h2 {\n    font-size: ", ";\n  }\n  h3 {\n    font-size: ", ";\n  }\n  h4,\n  h5,\n  h6 {\n    font-size: 1em;\n    opacity: 0.85;\n  }\n\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n\n  ul,\n  ol {\n    margin: 4px 0;\n    padding-left: 20px;\n  }\n  li {\n    margin: 2px 0;\n  }\n"])), MONO_FONT, function (_a) {
     var $compact = _a.$compact;
     return ($compact ? '10px 0 4px' : '16px 0 8px');
 }, function (_a) {
@@ -111,7 +112,7 @@ exports.Description = (0, react_1.memo)(function (_a) {
             // its own paragraphs, lists, headings — and a `<p>` may not contain
             // any of them, so the browser closed the outer paragraph early and
             // the rest of the description escaped its own styling.
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [markdownRenderer ? (markdownRenderer({ value: finalLongDescription, compact: compact })) : ((0, jsx_runtime_1.jsx)(StyledDescriptionMarkdown, { "$compact": compact, children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: components, children: finalLongDescription }) })), renderToggle()] })) : ((0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreSpan, { effect: effect, children: [finalShownDescription, " ", finalLongDescription ? renderToggle() : null] }) }))), margin === 'both' || margin === 'bottom' ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 10 }) : null] }));
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [markdownRenderer ? (markdownRenderer({ value: finalLongDescription, compact: compact })) : ((0, jsx_runtime_1.jsx)(StyledDescriptionMarkdown, { "$compact": compact, children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: components, children: finalLongDescription }) })), renderToggle()] })) : ((0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreSpan, { effect: effect, children: [(0, markdownText_1.markdownToProse)(finalShownDescription), " ", finalLongDescription ? renderToggle() : null] }) }))), margin === 'both' || margin === 'bottom' ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 10 }) : null] }));
 });
 var templateObject_1;
 //# sourceMappingURL=index.js.map

package/dist/components/Description/index.js.map

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

package/dist/components/colorValue/colorValue.d.ts

@@ -0,0 +1,59 @@
+/** What a stored value is, as a color. */
+export type TReqraftColorValueDescription = 
+/** A color: `text` is how it is written (`#6495ED`, or `rgba(…)` when it is see-through), `css` paints it. */
+{
+    kind: 'color';
+    text: string;
+    css: string;
+}
+/** No color: nothing, an empty string or an empty hash. */
+ | {
+    kind: 'empty';
+}
+/** A value that is not a color; `shown` is the value as text (a string in quotes), to say what it is. */
+ | {
+    kind: 'invalid';
+    shown: string;
+};
+/** A color's red, green and blue, each from 0 to 255, and its opacity, from 0 to 1. */
+export interface IReqraftRgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/**
+ * What a hex code says: its red, green and blue, and its opacity - the one hex reader in reqraft (qorus#646), for
+ * the color field, the readers here and a host that turns a hex code into a stored color. A hex code has 3, 4, 6 or 8
+ * hex digits, with or without its `#`, in either case. 3 and 4 are short for 6 and 8, each digit doubled: `F808` is
+ * `FF880088`. The last pair of 8 (the last digit of 4) is the opacity, `00` to `FF` read as 0 to 1; without one the
+ * color is opaque. Undefined when the text is not a hex code.
+ */
+export declare const readHexColor: (text: string) => IReqraftRgba | undefined;
+/** Whether a hex code gives its own opacity: 4 or 8 digits. */
+export declare const hexGivesOpacity: (text: string) => boolean;
+/**
+ * What a stored value is, as a color: a color (how it is written, and how CSS paints it), no color, or
+ * a value that is not a color (shown as it is). A channel past its range is brought into it, as the color
+ * field does; a channel that is not a finite number, a hex code that is not one (`#zzz`, seven digits) or
+ * a color name is not a color.
+ */
+export declare const describeColorValue: (value: unknown) => TReqraftColorValueDescription;
+/** How a color is written (`#0000FF`, or `rgba(…)` when see-through); undefined when the value is none. */
+export declare const formatColorValue: (value: unknown) => string | undefined;
+/** The CSS color a swatch is painted (alpha kept); undefined when the value is none. */
+export declare const colorToCss: (value: unknown) => string | undefined;
+/**
+ * What is wrong with a value stored as an `rgbcolor`, in plain words; undefined when it is a stored color (qorus#646,
+ * David): the hash `{ r, g, b, a? }`, `r`, `g` and `b` whole numbers from 0 to 255 and `a` its opacity, a number from
+ * 0 to 1 (without one, the color is opaque), and no other field: the server refuses one (Qore's RgbColorDataType:
+ * "unsupported fields in value").
+ *
+ * A hex code, bare or as `{ hex }`, and a color with other fields beside its own (react-color wrote a `hex`) are not
+ * stored colors: the readers above still draw them, so a value stored that way is seen, and this says why it is
+ * wrong. The color field stores the hash, and only the hash, when it edits such a value.
+ */
+export declare const storedColorProblem: (value: unknown) => string | undefined;
+/** Whether a value is a stored color, `{ r, g, b, a? }`; see `storedColorProblem`. */
+export declare const isStoredColor: (value: unknown) => boolean;
+//# sourceMappingURL=colorValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorValue.d.ts","sourceRoot":"","sources":["../../../src/components/colorValue/colorValue.ts"],"names":[],"mappings":"AASA,0CAA0C;AAC1C,MAAM,MAAM,6BAA6B;AACvC,8GAA8G;AAC5G;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE;AAC9C,2DAA2D;GACzD;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE;AACnB,yGAAyG;GACvG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AA8BvC,uFAAuF;AACvF,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,SAAU,MAAM,KAAG,YAAY,GAAG,SAe1D,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,eAAe,SAAU,MAAM,KAAG,OAG9C,CAAC;AAmEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,OAAO,KAAG,6BA8BnD,CAAC;AAEF,2GAA2G;AAC3G,eAAO,MAAM,gBAAgB,UAAW,OAAO,KAAG,MAAM,GAAG,SAG1D,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,UAAU,UAAW,OAAO,KAAG,MAAM,GAAG,SAGpD,CAAC;AA2BF;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,UAAW,OAAO,KAAG,MAAM,GAAG,SA+C5D,CAAC;AAEF,sFAAsF;AACtF,eAAO,MAAM,aAAa,UAAW,OAAO,KAAG,OAAkD,CAAC"}

package/dist/components/colorValue/colorValue.js

@@ -0,0 +1,245 @@
+"use strict";
+// Copyright 2026 Qore Technologies, s.r.o.
+// What a stored color is: the one reader for every read-only view of a color (qorus#646).
+//
+// A color reaches a page in the shapes it is stored in - `{ r, g, b }` or `{ r, g, b, a }` as the color
+// field stores it - and in shapes a stored color is not, which are drawn so a value stored that way is seen:
+// `{ r, g, b, a }` with other fields beside them (react-color wrote a `hex`), `{ hex }`, or a hex code, with or
+// without its `#`, as a value written by hand or by another client can be. `ReqraftColorValue` draws what
+// this reads, and a compact form row summarises a color with it, so the two never disagree.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStoredColor = exports.storedColorProblem = exports.colorToCss = exports.formatColorValue = exports.describeColorValue = exports.hexGivesOpacity = exports.readHexColor = void 0;
+/** A hex code as CSS takes one: 3, 4, 6 or 8 hex digits (the last digit or pair is the alpha). */
+var HEX_CODE = /^#?([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/** The longest an invalid value is shown; a longer one is cut, with an ellipsis. */
+var SHOWN_MAX = 60;
+var isFiniteNumber = function (n) { return typeof n === 'number' && Number.isFinite(n); };
+/** A channel brought into its range, as a whole number: the color field does the same. */
+var clampChannel = function (n) { return Math.max(0, Math.min(255, Math.round(n))); };
+var clampAlpha = function (n) { return Math.max(0, Math.min(1, n)); };
+var toHexPart = function (n) { return clampChannel(n).toString(16).padStart(2, '0'); };
+var hasRgb = function (c) {
+    return c.r !== undefined && c.g !== undefined && c.b !== undefined;
+};
+/**
+ * What a hex code says: its red, green and blue, and its opacity - the one hex reader in reqraft (qorus#646), for
+ * the color field, the readers here and a host that turns a hex code into a stored color. A hex code has 3, 4, 6 or 8
+ * hex digits, with or without its `#`, in either case. 3 and 4 are short for 6 and 8, each digit doubled: `F808` is
+ * `FF880088`. The last pair of 8 (the last digit of 4) is the opacity, `00` to `FF` read as 0 to 1; without one the
+ * color is opaque. Undefined when the text is not a hex code.
+ */
+var readHexColor = function (text) {
+    var _a;
+    var match = HEX_CODE.exec(text.trim());
+    if (!match) {
+        return undefined;
+    }
+    var digits = match[1];
+    var full = digits.length <= 4 ?
+        digits
+            .split('')
+            .map(function (digit) { return "".concat(digit).concat(digit); })
+            .join('')
+        : digits;
+    var _b = ((_a = full.match(/../g)) !== null && _a !== void 0 ? _a : []).map(function (pair) { return parseInt(pair, 16); }), r = _b[0], g = _b[1], b = _b[2], a = _b[3];
+    return { r: r, g: g, b: b, a: a === undefined ? 1 : a / 255 };
+};
+exports.readHexColor = readHexColor;
+/** Whether a hex code gives its own opacity: 4 or 8 digits. */
+var hexGivesOpacity = function (text) {
+    var match = HEX_CODE.exec(text.trim());
+    return !!match && (match[1].length === 4 || match[1].length === 8);
+};
+exports.hexGivesOpacity = hexGivesOpacity;
+/** A hex code with its `#`, or undefined when the text is not one. */
+var hexCode = function (text) {
+    var trimmed = text.trim();
+    return (HEX_CODE.test(trimmed) ?
+        trimmed.startsWith('#') ?
+            trimmed
+            : "#".concat(trimmed)
+        : undefined);
+};
+/** Whether a value holds nothing: nothing, an empty string or an empty hash. */
+var isEmpty = function (value) {
+    return value === undefined ||
+        value === null ||
+        (typeof value === 'string' && value.trim() === '') ||
+        (typeof value === 'object' && !Array.isArray(value) && Object.keys(value).length === 0);
+};
+/** A stored color's parts, or undefined when the value is not a color. */
+var parseColor = function (value) {
+    if (typeof value === 'string') {
+        var hex = hexCode(value);
+        return hex ? { hex: hex, a: 1 } : undefined;
+    }
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        var _a = value, r = _a.r, g = _a.g, b = _a.b, a = _a.a, hex = _a.hex;
+        // an alpha that is given is a number, or this is not a color (null is an alpha not given)
+        if (a !== undefined && a !== null && !isFiniteNumber(a)) {
+            return undefined;
+        }
+        var alpha = isFiniteNumber(a) ? clampAlpha(a) : 1;
+        if (isFiniteNumber(r) && isFiniteNumber(g) && isFiniteNumber(b)) {
+            return { r: r, g: g, b: b, a: alpha };
+        }
+        if (typeof hex === 'string') {
+            var code = hexCode(hex);
+            return code ? { hex: code, a: alpha } : undefined;
+        }
+    }
+    return undefined;
+};
+/** A value that is not a color, as text: a string in quotes, anything else as JSON, cut when long. */
+var showValue = function (value) {
+    var _a;
+    var shown;
+    if (typeof value === 'string') {
+        shown = "\u201C".concat(value, "\u201D");
+    }
+    else {
+        try {
+            shown = (_a = JSON.stringify(value)) !== null && _a !== void 0 ? _a : String(value);
+        }
+        catch (_b) {
+            // a value JSON cannot write (a cycle, a BigInt) is still shown as something
+            shown = String(value);
+        }
+    }
+    return shown.length > SHOWN_MAX ? "".concat(shown.slice(0, SHOWN_MAX), "\u2026") : shown;
+};
+/**
+ * What a stored value is, as a color: a color (how it is written, and how CSS paints it), no color, or
+ * a value that is not a color (shown as it is). A channel past its range is brought into it, as the color
+ * field does; a channel that is not a finite number, a hex code that is not one (`#zzz`, seven digits) or
+ * a color name is not a color.
+ */
+var describeColorValue = function (value) {
+    if (isEmpty(value)) {
+        return { kind: 'empty' };
+    }
+    var c = parseColor(value);
+    if (!c) {
+        return { kind: 'invalid', shown: showValue(value) };
+    }
+    if (hasRgb(c)) {
+        var _a = [clampChannel(c.r), clampChannel(c.g), clampChannel(c.b)], r = _a[0], g = _a[1], b = _a[2];
+        var alpha = Math.round(c.a * 100) / 100;
+        return {
+            kind: 'color',
+            // rgba(…) for a see-through color: the hex shortcut would drop its alpha
+            text: c.a < 1 ?
+                "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")")
+                : "#".concat(toHexPart(r)).concat(toHexPart(g)).concat(toHexPart(b)).toUpperCase(),
+            css: "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(c.a, ")"),
+        };
+    }
+    // written as it was stored; painted as the hex reader reads it, as the color field would store it - its own
+    // opacity where it has one (4 or 8 digits), or the opacity given beside it
+    var read = (0, exports.readHexColor)(c.hex);
+    return {
+        kind: 'color',
+        text: c.hex.toUpperCase(),
+        // the opacity in hundredths, as the color field stores it
+        css: "rgba(".concat(read.r, ", ").concat(read.g, ", ").concat(read.b, ", ").concat((0, exports.hexGivesOpacity)(c.hex) ? Math.round(read.a * 100) / 100 : c.a, ")"),
+    };
+};
+exports.describeColorValue = describeColorValue;
+/** How a color is written (`#0000FF`, or `rgba(…)` when see-through); undefined when the value is none. */
+var formatColorValue = function (value) {
+    var description = (0, exports.describeColorValue)(value);
+    return description.kind === 'color' ? description.text : undefined;
+};
+exports.formatColorValue = formatColorValue;
+/** The CSS color a swatch is painted (alpha kept); undefined when the value is none. */
+var colorToCss = function (value) {
+    var description = (0, exports.describeColorValue)(value);
+    return description.kind === 'color' ? description.css : undefined;
+};
+exports.colorToCss = colorToCss;
+/** The channels of a stored color, with the words a reader knows them by. */
+var STORED_CHANNELS = [
+    ['r', 'red'],
+    ['g', 'green'],
+    ['b', 'blue'],
+];
+var isWholeChannel = function (n) {
+    return typeof n === 'number' && Number.isInteger(n) && n >= 0 && n <= 255;
+};
+var isOpacity = function (n) {
+    return typeof n === 'number' && Number.isFinite(n) && n >= 0 && n <= 1;
+};
+/** "red (r)", "red (r) and blue (b)", "red (r), green (g) and blue (b)" - and the same for any words. */
+var listChannels = function (channels) {
+    return channels.length < 2 ?
+        channels.join('')
+        : "".concat(channels.slice(0, -1).join(', '), " and ").concat(channels[channels.length - 1]);
+};
+/** The fields a stored color has: its channels and its opacity. */
+var STORED_FIELDS = ['r', 'g', 'b', 'a'];
+/** The stored shape, said where a value is not in it at all. */
+var STORED_AS = 'A color is stored as its red, green and blue values (r, g, b)';
+/**
+ * What is wrong with a value stored as an `rgbcolor`, in plain words; undefined when it is a stored color (qorus#646,
+ * David): the hash `{ r, g, b, a? }`, `r`, `g` and `b` whole numbers from 0 to 255 and `a` its opacity, a number from
+ * 0 to 1 (without one, the color is opaque), and no other field: the server refuses one (Qore's RgbColorDataType:
+ * "unsupported fields in value").
+ *
+ * A hex code, bare or as `{ hex }`, and a color with other fields beside its own (react-color wrote a `hex`) are not
+ * stored colors: the readers above still draw them, so a value stored that way is seen, and this says why it is
+ * wrong. The color field stores the hash, and only the hash, when it edits such a value.
+ */
+var storedColorProblem = function (value) {
+    if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+        return 'No color is set.';
+    }
+    if (typeof value === 'string') {
+        var hex = hexCode(value);
+        return "".concat(STORED_AS, ", not as ").concat(hex ? "the hex code ".concat(showValue(value)) : showValue(value), ".");
+    }
+    if (typeof value !== 'object' || Array.isArray(value)) {
+        return "".concat(STORED_AS, ", not as ").concat(showValue(value), ".");
+    }
+    var color = value;
+    var missing = STORED_CHANNELS.filter(function (_a) {
+        var key = _a[0];
+        return color[key] === undefined || color[key] === null;
+    });
+    if (missing.length === STORED_CHANNELS.length && typeof color.hex === 'string') {
+        return "".concat(STORED_AS, ", not as the hex code ").concat(showValue(color.hex), ".");
+    }
+    var problems = [];
+    if (missing.length) {
+        var names = missing.map(function (_a) {
+            var key = _a[0], name = _a[1];
+            return "".concat(name, " (").concat(key, ")");
+        });
+        problems.push("".concat(listChannels(names), " ").concat(missing.length === 1 ? 'is' : 'are', " missing"));
+    }
+    for (var _i = 0, STORED_CHANNELS_1 = STORED_CHANNELS; _i < STORED_CHANNELS_1.length; _i++) {
+        var _a = STORED_CHANNELS_1[_i], key = _a[0], name_1 = _a[1];
+        var channel = color[key];
+        if (channel !== undefined && channel !== null && !isWholeChannel(channel)) {
+            problems.push("".concat(name_1, " (").concat(key, ") must be a whole number from 0 to 255, not ").concat(showValue(channel)));
+        }
+    }
+    // an opacity that is not given is a color that is opaque
+    if (color.a !== undefined && color.a !== null && !isOpacity(color.a)) {
+        problems.push("opacity (a) must be a number from 0 to 1, not ".concat(showValue(color.a)));
+    }
+    // a field beside its own, which the server refuses
+    var extra = Object.keys(color).filter(function (key) { return !STORED_FIELDS.includes(key); });
+    if (extra.length) {
+        problems.push("the color also has ".concat(listChannels(extra.map(function (key) { return showValue(key); })), ", which a stored color can't have"));
+    }
+    if (!problems.length) {
+        return undefined;
+    }
+    var said = problems.join('; ');
+    return "".concat(said.charAt(0).toUpperCase()).concat(said.slice(1), ".");
+};
+exports.storedColorProblem = storedColorProblem;
+/** Whether a value is a stored color, `{ r, g, b, a? }`; see `storedColorProblem`. */
+var isStoredColor = function (value) { return (0, exports.storedColorProblem)(value) === undefined; };
+exports.isStoredColor = isStoredColor;
+//# sourceMappingURL=colorValue.js.map

package/dist/components/colorValue/colorValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorValue.js","sourceRoot":"","sources":["../../../src/components/colorValue/colorValue.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,0FAA0F;AAC1F,EAAE;AACF,wGAAwG;AACxG,6GAA6G;AAC7G,gHAAgH;AAChH,0GAA0G;AAC1G,4FAA4F;;;AAW5F,kGAAkG;AAClG,IAAM,QAAQ,GAAG,wDAAwD,CAAC;AAE1E,oFAAoF;AACpF,IAAM,SAAS,GAAG,EAAE,CAAC;AAYrB,IAAM,cAAc,GAAG,UAAC,CAAU,IAAkB,OAAA,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAA3C,CAA2C,CAAC;AAEhG,0FAA0F;AAC1F,IAAM,YAAY,GAAG,UAAC,CAAS,IAAa,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAzC,CAAyC,CAAC;AAEtF,IAAM,UAAU,GAAG,UAAC,CAAS,IAAa,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAA3B,CAA2B,CAAC;AAEtE,IAAM,SAAS,GAAG,UAAC,CAAS,IAAa,OAAA,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAA7C,CAA6C,CAAC;AAEvF,IAAM,MAAM,GAAG,UAAC,CAAe;IAC7B,OAAA,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,KAAK,SAAS;AAA3D,CAA2D,CAAC;AAU9D;;;;;;GAMG;AACI,IAAM,YAAY,GAAG,UAAC,IAAY;;IACvC,IAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACzC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACxB,IAAM,IAAI,GACR,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;QAClB,MAAM;aACH,KAAK,CAAC,EAAE,CAAC;aACT,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,UAAG,KAAK,SAAG,KAAK,CAAE,EAAlB,CAAkB,CAAC;aAClC,IAAI,CAAC,EAAE,CAAC;QACb,CAAC,CAAC,MAAM,CAAC;IACL,IAAA,KAAe,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,EAAlB,CAAkB,CAAC,EAAzE,CAAC,QAAA,EAAE,CAAC,QAAA,EAAE,CAAC,QAAA,EAAE,CAAC,QAA+D,CAAC;IACjF,OAAO,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC;AACvD,CAAC,CAAC;AAfW,QAAA,YAAY,gBAevB;AAEF,+DAA+D;AACxD,IAAM,eAAe,GAAG,UAAC,IAAY;IAC1C,IAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACzC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;AACrE,CAAC,CAAC;AAHW,QAAA,eAAe,mBAG1B;AAEF,sEAAsE;AACtE,IAAM,OAAO,GAAG,UAAC,IAAY;IAC3B,IAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IAC5B,OAAO,CACL,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QACtB,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;YACvB,OAAO;YACT,CAAC,CAAC,WAAI,OAAO,CAAE;QACjB,CAAC,CAAC,SAAS,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,IAAM,OAAO,GAAG,UAAC,KAAc;IAC7B,OAAA,KAAK,KAAK,SAAS;QACnB,KAAK,KAAK,IAAI;QACd,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;QAClD,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;AAHvF,CAGuF,CAAC;AAE1F,0EAA0E;AAC1E,IAAM,UAAU,GAAG,UAAC,KAAc;IAChC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,IAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAA,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACzC,CAAC;IACD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1D,IAAA,KAAsB,KAM3B,EANO,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,GAAG,SAMtB,CAAC;QACF,0FAA0F;QAC1F,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;YACxD,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,IAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpD,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,OAAO,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAC/B,CAAC;QACD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,IAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;YAC1B,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QACpD,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,sGAAsG;AACtG,IAAM,SAAS,GAAG,UAAC,KAAc;;IAC/B,IAAI,KAAa,CAAC;IAClB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,KAAK,GAAG,gBAAI,KAAK,WAAG,CAAC;IACvB,CAAC;SAAM,CAAC;QACN,IAAI,CAAC;YACH,KAAK,GAAG,MAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,mCAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC;QAAC,WAAM,CAAC;YACP,4EAA4E;YAC5E,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,WAAG,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5E,CAAC,CAAC;AAEF;;;;;GAKG;AACI,IAAM,kBAAkB,GAAG,UAAC,KAAc;IAC/C,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACnB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;IAC3B,CAAC;IACD,IAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAC5B,IAAI,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACtD,CAAC;IACD,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACR,IAAA,KAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAApE,CAAC,QAAA,EAAE,CAAC,QAAA,EAAE,CAAC,QAA6D,CAAC;QAC5E,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QAC1C,OAAO;YACL,IAAI,EAAE,OAAO;YACb,yEAAyE;YACzE,IAAI,EACF,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBACP,eAAQ,CAAC,eAAK,CAAC,eAAK,CAAC,eAAK,KAAK,MAAG;gBACpC,CAAC,CAAC,WAAI,SAAS,CAAC,CAAC,CAAC,SAAG,SAAS,CAAC,CAAC,CAAC,SAAG,SAAS,CAAC,CAAC,CAAC,CAAE,CAAC,WAAW,EAAE;YAClE,GAAG,EAAE,eAAQ,CAAC,eAAK,CAAC,eAAK,CAAC,eAAK,CAAC,CAAC,CAAC,MAAG;SACtC,CAAC;IACJ,CAAC;IACD,4GAA4G;IAC5G,2EAA2E;IAC3E,IAAM,IAAI,GAAG,IAAA,oBAAY,EAAC,CAAC,CAAC,GAAI,CAAE,CAAC;IACnC,OAAO;QACL,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,CAAC,CAAC,GAAI,CAAC,WAAW,EAAE;QAC1B,0DAA0D;QAC1D,GAAG,EAAE,eAAQ,IAAI,CAAC,CAAC,eAAK,IAAI,CAAC,CAAC,eAAK,IAAI,CAAC,CAAC,eAAK,IAAA,uBAAe,EAAC,CAAC,CAAC,GAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAG;KAChH,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,kBAAkB,sBA8B7B;AAEF,2GAA2G;AACpG,IAAM,gBAAgB,GAAG,UAAC,KAAc;IAC7C,IAAM,WAAW,GAAG,IAAA,0BAAkB,EAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,WAAW,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;AACrE,CAAC,CAAC;AAHW,QAAA,gBAAgB,oBAG3B;AAEF,wFAAwF;AACjF,IAAM,UAAU,GAAG,UAAC,KAAc;IACvC,IAAM,WAAW,GAAG,IAAA,0BAAkB,EAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,WAAW,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;AACpE,CAAC,CAAC;AAHW,QAAA,UAAU,cAGrB;AAEF,6EAA6E;AAC7E,IAAM,eAAe,GAAG;IACtB,CAAC,GAAG,EAAE,KAAK,CAAC;IACZ,CAAC,GAAG,EAAE,OAAO,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,CAAC;CACL,CAAC;AAEX,IAAM,cAAc,GAAG,UAAC,CAAU;IAChC,OAAA,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG;AAAlE,CAAkE,CAAC;AAErE,IAAM,SAAS,GAAG,UAAC,CAAU;IAC3B,OAAA,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAA/D,CAA+D,CAAC;AAElE,yGAAyG;AACzG,IAAM,YAAY,GAAG,UAAC,QAAkB;IACtC,OAAA,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACnB,CAAC,CAAC,UAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAQ,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAE;AAF5E,CAE4E,CAAC;AAE/E,mEAAmE;AACnE,IAAM,aAAa,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAE3C,gEAAgE;AAChE,IAAM,SAAS,GAAG,+DAA+D,CAAC;AAElF;;;;;;;;;GASG;AACI,IAAM,kBAAkB,GAAG,UAAC,KAAc;IAC/C,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAChG,OAAO,kBAAkB,CAAC;IAC5B,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,IAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,UAAG,SAAS,sBAAY,GAAG,CAAC,CAAC,CAAC,uBAAgB,SAAS,CAAC,KAAK,CAAC,CAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAG,CAAC;IAChG,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACtD,OAAO,UAAG,SAAS,sBAAY,SAAS,CAAC,KAAK,CAAC,MAAG,CAAC;IACrD,CAAC;IACD,IAAM,KAAK,GAAG,KAAgC,CAAC;IAC/C,IAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CACpC,UAAC,EAAK;YAAJ,GAAG,QAAA;QAAM,OAAA,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI;IAA/C,CAA+C,CAC3D,CAAC;IACF,IAAI,OAAO,CAAC,MAAM,KAAK,eAAe,CAAC,MAAM,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC/E,OAAO,UAAG,SAAS,mCAAyB,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,MAAG,CAAC;IACtE,CAAC;IACD,IAAM,QAAQ,GAAa,EAAE,CAAC;IAC9B,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACnB,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,UAAC,EAAW;gBAAV,GAAG,QAAA,EAAE,IAAI,QAAA;YAAM,OAAA,UAAG,IAAI,eAAK,GAAG,MAAG;QAAlB,CAAkB,CAAC,CAAC;QAC/D,QAAQ,CAAC,IAAI,CAAC,UAAG,YAAY,CAAC,KAAK,CAAC,cAAI,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,aAAU,CAAC,CAAC;IACzF,CAAC;IACD,KAA0B,UAAe,EAAf,mCAAe,EAAf,6BAAe,EAAf,IAAe,EAAE,CAAC;QAAjC,IAAA,0BAAW,EAAV,GAAG,QAAA,EAAE,MAAI,QAAA;QACnB,IAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC3B,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1E,QAAQ,CAAC,IAAI,CACX,UAAG,MAAI,eAAK,GAAG,yDAA+C,SAAS,CAAC,OAAO,CAAC,CAAE,CACnF,CAAC;QACJ,CAAC;IACH,CAAC;IACD,yDAAyD;IACzD,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACrE,QAAQ,CAAC,IAAI,CAAC,wDAAiD,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC;IACvF,CAAC;IACD,mDAAmD;IACnD,IAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,EAA5B,CAA4B,CAAC,CAAC;IAC/E,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,QAAQ,CAAC,IAAI,CACX,6BAAsB,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,SAAS,CAAC,GAAG,CAAC,EAAd,CAAc,CAAC,CAAC,sCAAmC,CAC1G,CAAC;IACJ,CAAC;IACD,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACrB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjC,OAAO,UAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,SAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAG,CAAC;AAC5D,CAAC,CAAC;AA/CW,QAAA,kBAAkB,sBA+C7B;AAEF,sFAAsF;AAC/E,IAAM,aAAa,GAAG,UAAC,KAAc,IAAc,OAAA,IAAA,0BAAkB,EAAC,KAAK,CAAC,KAAK,SAAS,EAAvC,CAAuC,CAAC;AAArF,QAAA,aAAa,iBAAwE"}

package/dist/components/colorValue/index.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from 'react';
+import { IReqraftColorValueLabels } from './labels';
+export { colorToCss, describeColorValue, formatColorValue, hexGivesOpacity, isStoredColor, readHexColor, storedColorProblem, } from './colorValue';
+export type { IReqraftRgba, TReqraftColorValueDescription } from './colorValue';
+export { DEFAULT_COLOR_VALUE_LABELS } from './labels';
+export type { IReqraftColorValueLabels } from './labels';
+/**
+ * `normal` for a value shown on its own (a detail page); `compact` for a one-line summary (a form row, a
+ * table cell): a smaller swatch, closer to its text.
+ */
+export type TReqraftColorValueSize = 'normal' | 'compact';
+export interface IReqraftColorValueProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The stored color: `{ r, g, b }`, `{ r, g, b, a }`, `{ hex }` or a hex code, with or without its `#`. */
+    value: unknown;
+    /** `normal` (default) or `compact`. */
+    size?: TReqraftColorValueSize;
+    /**
+     * Whether the text wraps where it does not fit, or keeps to one line ending in an ellipsis. A compact
+     * value keeps to one line unless told otherwise; a normal one wraps.
+     */
+    wrap?: boolean;
+    /** The words, where they are not English. */
+    labels?: Partial<IReqraftColorValueLabels>;
+}
+/**
+ * A stored color, read: a swatch painted the color, beside the color written out (`#6495ED`, or `rgba(…)`
+ * when it is see-through), on a wash of the color. The text is the value, so it reads, copies and is found
+ * like any text; the swatch is an image whose text alternative names the color.
+ *
+ * A value that is not a color draws no swatch: it says what the value is ("Not a color: “#zzz”"). With no
+ * value it says there is no color. Every shape a color is stored in is read (`describeColorValue`).
+ */
+export declare const ReqraftColorValue: import("react").MemoExoticComponent<({ value, size: askedSize, wrap, labels, className, style, ...rest }: IReqraftColorValueProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=index.d.ts.map