@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g20c3bec

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,58 @@ client.onNotification('qonsole/sessionStateChanged', (params) => { /* … */ });
 client.disconnect();
 ```
 
+### `ReqraftWebSocket`
+
+The WebSocket under `useReqraftWebSocket` and `ReqraftLspClient`: one socket per URL on the configured instance (unless `pooled: false`), with a heartbeat and reconnects. `useReqraftWebSocket` takes the same options.
+
+```ts
+import { ReqraftWebSocket } from '@qoretechnologies/reqraft';
+
+const socket = new ReqraftWebSocket({
+  url: 'log/main', // the path on the instance
+  onMessage: (event) => append(event.data),
+  onReconnectFailed: () => offerReload(),
+});
+
+socket.remove(); // let go of it; the last user of a shared socket closes it
+```
+
+| Option | Default | |
+|---|---|---|
+| `pooled` | `true` | Users of the same `url` share one socket; `false` gives this one its own |
+| `reconnect` | `true` | Replace a socket that closes, or whose handshake does not open in time |
+| `reconnectInterval` | `5000` | ms between attempts; the first attempt after a socket is lost is made at once |
+| `maxReconnectTries` | `10` | Attempts before `onReconnectFailed` |
+| `handshakeTimeout` | `15000` (`REQRAFT_WS_HANDSHAKE_TIMEOUT_MS`) | ms a handshake has to open; `0` sets no limit |
+| `probeTimeout` | `10000` (`REQRAFT_WS_PROBE_TIMEOUT_MS`) | ms an attempt waits for its server-status probe; `0` sets no limit |
+| `useHeartbeat` | `true` | Send `ping` every 3 s while open |
+| `tokenOverride` | | A token for this socket instead of the instance's |
+| `onOpen`, `onMessage`, `onClose`, `onError`, `onReconnecting`, `onReconnectFailed` | | Callbacks |
+
+- **A handshake that hangs** (the server takes the connection and never answers the upgrade) sends no event at all until the browser gives up, about four minutes later in Chromium, and Chromium holds back every other socket to the same host and port while it waits. At `handshakeTimeout` the socket is closed and replaced: its users get `onError` and then `onClose` with code 1006, as for a handshake that failed, and the replacement follows the same `reconnectInterval` and `maxReconnectTries` as after a close. An open socket has no deadline, and a connection never has more than one socket.
+- **Before each attempt** it asks the server `GET system/pid`, so that a session that has expired is sent to sign in (`fetchConfig.unauthorizedRedirect`). The answer never holds the attempt back: the request is aborted after `probeTimeout`, and the attempt is made either way.
+- **`remove()` and `close()`** close on purpose: the socket is not reconnected, also when it was still connecting (a browser reports that close as 1006), and a reconnect waiting to run, its probe and the handshake deadline are called off. `ReqraftWebSocketsManager.closeAll()` closes every socket the same way.
+
+### `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/AllowedValuesHelp.d.ts

@@ -0,0 +1,20 @@
+/** What help says to head the values a field holds one of. */
+export declare const ALLOWED_VALUES_HEADING = "Allowed values";
+/** What help says to head the values a field offers, where it takes others too. */
+export declare const SUGGESTED_VALUES_HEADING = "Suggested values";
+export interface IAllowedValuesHelpProps {
+    /** The field's allowed values, however each entry is written (`allowedValueOf`). */
+    values: unknown[];
+    /** The values are suggestions: the field takes others too. */
+    suggested?: boolean;
+    compact?: boolean;
+}
+/**
+ * The values a field takes, as help shows them (qorus#646, David's policy): a bold heading, then a small table, a
+ * row a value - the exact value as data, its name where it has one of its own, and its description. A column no
+ * value has anything in is left out. One font size throughout, and every cell wraps, so it fits a phone. It was a
+ * bulleted list, whose descriptions ran on straight after their values in a larger font (David: "try a table for
+ * this instead"). "Suggested values" heads the values of a field that takes others too.
+ */
+export declare const AllowedValuesHelp: ({ values, suggested, compact }: IAllowedValuesHelpProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AllowedValuesHelp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AllowedValuesHelp.d.ts","sourceRoot":"","sources":["../../../src/components/Description/AllowedValuesHelp.tsx"],"names":[],"mappings":"AAOA,8DAA8D;AAC9D,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,mFAAmF;AACnF,eAAO,MAAM,wBAAwB,qBAAqB,CAAC;AAoE3D,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,MAAM,EAAE,OAAO,EAAE,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAeD;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,mCAAoC,uBAAuB,4CAmDxF,CAAC"}

package/dist/components/Description/AllowedValuesHelp.js

@@ -0,0 +1,86 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllowedValuesHelp = exports.SUGGESTED_VALUES_HEADING = exports.ALLOWED_VALUES_HEADING = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2026 Qore Technologies, s.r.o.
+var reqore_1 = require("@qoretechnologies/reqore");
+var colors_1 = require("@qoretechnologies/reqore/dist/helpers/colors");
+var styled_components_1 = __importDefault(require("styled-components"));
+var allowedValues_1 = require("../../helpers/allowedValues");
+var markdownText_1 = require("../../helpers/markdownText");
+/** What help says to head the values a field holds one of. */
+exports.ALLOWED_VALUES_HEADING = 'Allowed values';
+/** What help says to head the values a field offers, where it takes others too. */
+exports.SUGGESTED_VALUES_HEADING = 'Suggested values';
+var StyledAllowedValues = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 8px;\n  max-width: 100%;\n  /* one size for all of it: the heading, the column names, the values and what is said of them */\n  font-size: ", ";\n  line-height: 1.45;\n  color: ", ";\n\n  .allowed-values-heading {\n    font-weight: 700;\n    margin-bottom: 4px;\n  }\n\n  /* as wide as what it says, up to the help's width: stretched across a wide dialog, its columns stood apart */\n  table {\n    width: auto;\n    max-width: 100%;\n    border-collapse: collapse;\n    font-size: inherit;\n  }\n\n  th {\n    text-align: left;\n    font-weight: 600;\n    color: ", ";\n    padding: 2px 10px 4px 0;\n    border-bottom: 1px solid ", ";\n  }\n\n  td {\n    padding: 4px 10px 4px 0;\n    vertical-align: top;\n    border-bottom: 1px solid ", ";\n    /* a long word wraps in its cell: the table never runs wider than the help it is in */\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n\n  th:last-child,\n  td:last-child {\n    padding-right: 0;\n  }\n\n  tr:last-child td {\n    border-bottom: 0;\n  }\n\n  /* the exact value, as data: the code chip the markdown view draws code in, at the same size as the rest */\n  .allowed-value {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    font-size: 1em;\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: 3px;\n    padding: 0 0.35em;\n    white-space: normal;\n    overflow-wrap: anywhere;\n  }\n"], ["\n  margin-top: 8px;\n  max-width: 100%;\n  /* one size for all of it: the heading, the column names, the values and what is said of them */\n  font-size: ", ";\n  line-height: 1.45;\n  color: ", ";\n\n  .allowed-values-heading {\n    font-weight: 700;\n    margin-bottom: 4px;\n  }\n\n  /* as wide as what it says, up to the help's width: stretched across a wide dialog, its columns stood apart */\n  table {\n    width: auto;\n    max-width: 100%;\n    border-collapse: collapse;\n    font-size: inherit;\n  }\n\n  th {\n    text-align: left;\n    font-weight: 600;\n    color: ", ";\n    padding: 2px 10px 4px 0;\n    border-bottom: 1px solid ", ";\n  }\n\n  td {\n    padding: 4px 10px 4px 0;\n    vertical-align: top;\n    border-bottom: 1px solid ", ";\n    /* a long word wraps in its cell: the table never runs wider than the help it is in */\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n\n  th:last-child,\n  td:last-child {\n    padding-right: 0;\n  }\n\n  tr:last-child td {\n    border-bottom: 0;\n  }\n\n  /* the exact value, as data: the code chip the markdown view draws code in, at the same size as the rest */\n  .allowed-value {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    font-size: 1em;\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: 3px;\n    padding: 0 0.35em;\n    white-space: normal;\n    overflow-wrap: anywhere;\n  }\n"])), function (_a) {
+    var $compact = _a.$compact;
+    return ($compact ? '12px' : '13px');
+}, function (_a) {
+    var $text = _a.$text;
+    return $text;
+}, function (_a) {
+    var $muted = _a.$muted;
+    return $muted;
+}, function (_a) {
+    var $border = _a.$border;
+    return $border;
+}, function (_a) {
+    var $border = _a.$border;
+    return $border;
+}, function (_a) {
+    var $tint = _a.$tint;
+    return $tint;
+}, function (_a) {
+    var $border = _a.$border;
+    return $border;
+});
+/** One allowed value as a row of the table: the exact value, its own name, and what is said of it. */
+var rowOf = function (entry) {
+    var _a;
+    var value = (0, allowedValues_1.allowedValueOf)(entry);
+    var exact = typeof value === 'string' ? value : JSON.stringify(value);
+    var name = (0, allowedValues_1.allowedValueName)(entry);
+    var said = (_a = entry) !== null && _a !== void 0 ? _a : {};
+    return {
+        exact: exact,
+        name: name && name !== exact ? name : '',
+        description: (0, markdownText_1.markdownToProse)(said.short_desc || said.desc),
+    };
+};
+/**
+ * The values a field takes, as help shows them (qorus#646, David's policy): a bold heading, then a small table, a
+ * row a value - the exact value as data, its name where it has one of its own, and its description. A column no
+ * value has anything in is left out. One font size throughout, and every cell wraps, so it fits a phone. It was a
+ * bulleted list, whose descriptions ran on straight after their values in a larger font (David: "try a table for
+ * this instead"). "Suggested values" heads the values of a field that takes others too.
+ */
+var AllowedValuesHelp = function (_a) {
+    var values = _a.values, suggested = _a.suggested, compact = _a.compact;
+    var theme = (0, reqore_1.useReqoreTheme)();
+    var text = (0, colors_1.getReadableColor)(theme);
+    if (!values.length) {
+        return null;
+    }
+    var rows = values.map(rowOf);
+    var named = rows.some(function (row) { return !!row.name; });
+    var described = rows.some(function (row) { return !!row.description; });
+    return ((0, jsx_runtime_1.jsxs)(StyledAllowedValues, { className: 'allowed-values-help', "$text": text, "$muted": (0, colors_1.getReadableColor)(theme, undefined, undefined, true), "$tint": "".concat(text, "14"), "$border": "".concat(text, "24"), "$compact": compact, children: [(0, jsx_runtime_1.jsx)("div", { className: 'allowed-values-heading', children: suggested ? exports.SUGGESTED_VALUES_HEADING : exports.ALLOWED_VALUES_HEADING }), (0, jsx_runtime_1.jsxs)("table", { className: 'allowed-values-table', children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: 'col', children: "Value" }), named ?
+                                    (0, jsx_runtime_1.jsx)("th", { scope: 'col', children: "Name" })
+                                    : null, described ?
+                                    (0, jsx_runtime_1.jsx)("th", { scope: 'col', children: "Description" })
+                                    : null] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: rows.map(function (row, index) { return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("code", { className: 'allowed-value', children: row.exact }) }), named ?
+                                    (0, jsx_runtime_1.jsx)("td", { className: 'allowed-value-name', children: row.name })
+                                    : null, described ?
+                                    (0, jsx_runtime_1.jsx)("td", { className: 'allowed-value-description', children: row.description })
+                                    : null] }, "".concat(row.exact, "-").concat(index))); }) })] })] }));
+};
+exports.AllowedValuesHelp = AllowedValuesHelp;
+var templateObject_1;
+//# sourceMappingURL=AllowedValuesHelp.js.map

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

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

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA8F;AAC9F,gFAAoG;AAEpG,+BAA6D;AAC7D,kEAA2C;AAC3C,wEAAuC;AACvC,qEAAgE;AAmBhE;;;;;GAKG;AACH,IAAM,SAAS,GACb,qFAAqF,CAAC;AAExF;;;;;;GAMG;AACH,IAAM,yBAAyB,GAAG,2BAAM,CAAC,GAAG,8sEAAwB,8nBAajD,EAAS,w8BAsCd,EAA0D,2OAevD,EAAiD,iCAGjD,EAAiD,iCAGjD,EAA+C,8QAwB/D,KAnFkB,SAAS,EAsCd,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;AAAxC,CAAwC,EAevD,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;AAA/B,CAA+B,EAGjD,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;AAA/B,CAA+B,EAGjD,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AAA7B,CAA6B,CAwB/D,CAAC;AAEK,IAAM,YAAY,GAAG,UAAC,KAAU;IACrC,OAAO,CACL,uBAAC,yBAAgB,aACf,EAAE,EAAC,GAAG,EACN,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IACzD,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,YAAY,gBAQvB;AAEW,QAAA,WAAW,GAAG,IAAA,YAAI,EAC7B,UAAC,EAUmB;IATlB,IAAA,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,mBAAmB,yBAAA,EACnB,6BAA6B,mCAAA,EAC7B,iCAAgC,EAAhC,yBAAyB,mBAAG,IAAI,KAAA,EAChC,cAAiB,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACX,KAAK,UAAA,EAAE,wDAAwD;IACrE,OAAO,aAAA,EACJ,IAAI,cATR,yJAUA,CADQ;IAED,IAAA,KAAgD,IAAA,gBAAQ,EAC5D,mBAAmB,IAAI,CAAC,6BAA6B,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CACzF,EAFM,mBAAmB,QAAA,EAAE,sBAAsB,QAEjD,CAAC;IACF,IAAM,gBAAgB,GAAG,IAAA,6CAAmB,GAAE,CAAC;IAE/C,IAAM,sBAAsB,GAAG,gBAAgB,IAAI,eAAe,CAAC;IACnE,IAAM,yBAAyB,GAAG,CAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,MAAM,IAAG,yBAAyB,CAAC;IAE7F,IAAM,qBAAqB,GAAG,yBAAyB;QACrD,CAAC,CAAC,UAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC,EAAE,yBAAyB,CAAC,CAAE;QACjE,CAAC,CAAC,sBAAsB,CAAC;IAE3B,IAAM,oBAAoB,GACxB,eAAe,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAE7F,IAAM,sBAAsB,GAAG,IAAA,mBAAW,EAAC,UAAC,CAAmB;QAC7D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,sBAAsB,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,EAAL,CAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,MAAM,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAhC,CAAgC,EAAE,EAAE,CAAC,CAAC;IAEnE,IAAM,UAAU,GAAG,IAAA,eAAO,EACxB,cAAM,OAAA,CAAC;QACL,CAAC,EAAE,UAAC,OAAY,IAAK,OAAA,uBAAC,mBAAO,eAAK,OAAO,IAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,IAAG,EAArD,CAAqD;QAC1E,IAAI,EAAE,UAAC,OAAY,IAAK,OAAA,uBAAC,mBAAU,eAAK,OAAO,IAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,IAAG,EAAxD,CAAwD;QAChF,CAAC,EAAE,oBAAY;QACf,uEAAuE;QACvE,mEAAmE;QACnE,wCAAwC;KACzC,CAAC,EAPI,CAOJ,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,IAAM,YAAY,GAAG,IAAA,mBAAW,EAAC;QAC/B,IAAI,qBAAqB,KAAK,eAAe,IAAI,mBAAmB,EAAE,CAAC;YACrE,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,6DACG,mBAAmB,IAAI,uBAAC,6BAAoB,IAAC,MAAM,EAAE,CAAC,GAAI,EAC3D,uBAAC,yBAAgB,IACf,SAAS,EAAC,kBAAkB,EAC5B,MAAM,EAAE;wBACN,WAAW,EAAE,IAAI;wBACjB,UAAU,EAAE,GAAG;wBACf,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;wBACxC,KAAK,EAAE,OAAO;qBACf,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,OAAO,EAAE,sBAAsB,YAE9B,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAC3B,IAClB,CACJ,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,IAAI,CAAC,gBAAgB,IAAI,CAAC,eAAe,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,6DACG,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,uBAAC,6BAAoB,IAAC,MAAM,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,EACnF,mBAAmB,CAAC,CAAC,CAAC;YACrB,mEAAmE;YACnE,oEAAoE;YACpE,mEAAmE;YACnE,uDAAuD;YACvD,6DACG,gBAAgB,CAAC,CAAC,CAAC,CAClB,gBAAgB,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,SAAA,EAAE,CAAC,CAC3D,CAAC,CAAC,CAAC,CACF,uBAAC,yBAAyB,gBAAW,OAAO,YAC1C,uBAAC,wBAAa,IAAC,UAAU,EAAE,UAAU,YAAG,oBAAoB,GAAiB,GACnD,CAC7B,EACA,YAAY,EAAE,IACd,CACJ,CAAC,CAAC,CAAC,CACF,uBAAC,mBAAO,eAAK,IAAI,cACf,wBAAC,mBAAU,IAAC,MAAM,EAAE,MAAM,aACvB,qBAAqB,OAAG,oBAAoB,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,IAC1D,IACL,CACX,EACA,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,uBAAC,6BAAoB,IAAC,MAAM,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,IACtF,CACJ,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"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"}