@qoretechnologies/reqraft 0.10.30-pr.92.gb117ecd → 0.10.31-pr.92.g2abe73e

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

@@ -9,7 +9,14 @@ export interface IDescriptionProps extends IReqoreParagraphProps {
     maxShortDescriptionLength?: number;
     margin?: 'top' | 'bottom' | 'both' | 'none';
     type?: TQorusType;
+    /**
+     * Render for a constrained container — a row inset, a callout, a hover card.
+     *
+     * Forwarded to the host's markdown renderer and applied to the built-in
+     * heading scale.
+     */
+    compact?: boolean;
 }
 export declare const MarkdownLink: (props: any) => import("react/jsx-runtime").JSX.Element;
-export declare const Description: import("react").MemoExoticComponent<({ shortDescription, longDescription, longDescriptionOnly, longDescriptionShownByDefault, maxShortDescriptionLength, margin, type: _type, ...rest }: IDescriptionProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Description: import("react").MemoExoticComponent<({ shortDescription, longDescription, longDescriptionOnly, longDescriptionShownByDefault, maxShortDescriptionLength, margin, type: _type, compact, ...rest }: IDescriptionProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

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":";AAaA,OAAO,EAAE,qBAAqB,EAAW,MAAM,oDAAoD,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAI1D,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;CACnB;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,4CAQtC,CAAC;AAEF,eAAO,MAAM,WAAW,2LAUnB,iBAAiB,6CAiGrB,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;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"}

package/dist/components/Description/index.js

@@ -1,4 +1,8 @@
 "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 __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -31,14 +35,44 @@ var reqore_1 = require("@qoretechnologies/reqore");
 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 markdownRendererContext_1 = require("./markdownRendererContext");
+/**
+ * System monospace, spelled out rather than imported from
+ * `@qoretechnologies/reqore`'s font shorthands: that export postdates the
+ * `>=0.71.16` peer range this package supports, and a description must not be
+ * the reason a consumer has to move its Reqore version.
+ */
+var MONO_FONT = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace";
+/**
+ * The built-in markdown surface, used when no host renderer is supplied.
+ *
+ * `react-markdown` 9 dropped its `className` prop, so the styles cannot hang off
+ * `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 $compact = _a.$compact;
+    return ($compact ? '10px 0 4px' : '16px 0 8px');
+}, function (_a) {
+    var $compact = _a.$compact;
+    return ($compact ? '1.08em' : '1.5em');
+}, function (_a) {
+    var $compact = _a.$compact;
+    return ($compact ? '1.04em' : '1.3em');
+}, function (_a) {
+    var $compact = _a.$compact;
+    return ($compact ? '1em' : '1.15em');
+});
 var MarkdownLink = function (props) {
     return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTextEffect, __assign({ as: 'a', effect: { interactive: true, color: 'info', underline: true } }, props)));
 };
 exports.MarkdownLink = MarkdownLink;
 exports.Description = (0, react_1.memo)(function (_a) {
     var shortDescription = _a.shortDescription, longDescription = _a.longDescription, longDescriptionOnly = _a.longDescriptionOnly, longDescriptionShownByDefault = _a.longDescriptionShownByDefault, _b = _a.maxShortDescriptionLength, maxShortDescriptionLength = _b === void 0 ? 1000 : _b, _c = _a.margin, margin = _c === void 0 ? 'bottom' : _c, _type = _a.type, // eslint-disable-line @typescript-eslint/no-unused-vars
-    rest = __rest(_a, ["shortDescription", "longDescription", "longDescriptionOnly", "longDescriptionShownByDefault", "maxShortDescriptionLength", "margin", "type"]);
+    compact = _a.compact, rest = __rest(_a, ["shortDescription", "longDescription", "longDescriptionOnly", "longDescriptionShownByDefault", "maxShortDescriptionLength", "margin", "type", "compact"]);
     var _d = (0, react_1.useState)(longDescriptionOnly || (longDescriptionShownByDefault && longDescription ? true : false)), showLongDescription = _d[0], setShowLongDescription = _d[1];
+    var markdownRenderer = (0, markdownRendererContext_1.useMarkdownRenderer)();
     var actualShortDescription = shortDescription || longDescription;
     var isShortDescriptionTooLong = (actualShortDescription === null || actualShortDescription === void 0 ? void 0 : actualShortDescription.length) > maxShortDescriptionLength;
     var finalShownDescription = isShortDescriptionTooLong
@@ -50,6 +84,14 @@ exports.Description = (0, react_1.memo)(function (_a) {
         setShowLongDescription(function (prev) { return !prev; });
     }, []);
     var effect = (0, react_1.useMemo)(function () { return ({ italic: true, opacity: 0.7 }); }, []);
+    var components = (0, react_1.useMemo)(function () { return ({
+        p: function (options) { return (0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, __assign({}, options, { effect: effect, size: 'small' })); },
+        span: function (options) { return (0, jsx_runtime_1.jsx)(reqore_1.ReqoreSpan, __assign({}, options, { effect: effect, size: 'small' })); },
+        a: exports.MarkdownLink,
+        // `code` and `h1`…`h6` are deliberately NOT mapped — the surface above
+        // styles them, so an identifier stays readable and a heading stays
+        // smaller than the title it sits under.
+    }); }, [effect]);
     var renderToggle = (0, react_1.useCallback)(function () {
         if (finalShownDescription === longDescription || longDescriptionOnly) {
             return null;
@@ -64,17 +106,12 @@ exports.Description = (0, react_1.memo)(function (_a) {
     if (!shortDescription && !longDescription) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [margin === 'both' || margin === 'top' ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 10 }) : null, (0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, __assign({}, rest, { children: showLongDescription ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: {
-                                p: function (options) { return (0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, __assign({}, options, { effect: effect, size: 'small' })); },
-                                span: function (options) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreSpan, __assign({}, options, { effect: effect, size: 'small' }))); },
-                                h1: reqore_1.ReqoreH1,
-                                h2: reqore_1.ReqoreH2,
-                                h3: reqore_1.ReqoreH3,
-                                h4: reqore_1.ReqoreH4,
-                                h5: reqore_1.ReqoreH5,
-                                h6: reqore_1.ReqoreH6,
-                                a: exports.MarkdownLink,
-                                code: function (options) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreErrorBoundary, { children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({}, options, { label: options.children, color: '#d7d7d7', size: 'tiny', wrap: true })) })); },
-                            }, children: finalLongDescription }), renderToggle()] })) : ((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] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [margin === 'both' || margin === 'top' ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 10 }) : null, showLongDescription ? (
+            // Markdown is rendered outside `ReqoreP`: it emits block content —
+            // 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] }));
 });
+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/Description/markdownRendererContext.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+/**
+ * Draws a markdown string.
+ *
+ * `compact` asks for a constrained container — a row inset, a callout, a hover
+ * card — rather than a page: markdown authored as a document routinely opens
+ * with `##`, and at document scale that heading outgrows the title above it.
+ */
+export type TMarkdownRenderer = (args: {
+    value: string;
+    compact?: boolean;
+}) => ReactNode;
+/**
+ * The renderer `Description` draws markdown with, when a host supplies one.
+ *
+ * This package renders markdown in exactly one place — a field's description —
+ * but an application that has field descriptions has markdown everywhere else
+ * too: on its object pages, in its catalogues, in its chat transcripts. When
+ * reqraft draws descriptions with its own dialect and the host draws everything
+ * else with its own, the same text renders two different ways depending on which
+ * surface it landed on, and neither side can tell which one the reader saw.
+ *
+ * So the host's renderer wins where there is one. The built-in is a fallback for
+ * hosts that have no renderer of their own, not a second opinion.
+ */
+export declare const MarkdownRendererContext: import("react").Context<TMarkdownRenderer>;
+/** Returns the host-supplied markdown renderer, or `undefined` for the built-in. */
+export declare const useMarkdownRenderer: () => TMarkdownRenderer | undefined;
+//# sourceMappingURL=markdownRendererContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdownRendererContext.d.ts","sourceRoot":"","sources":["../../../src/components/Description/markdownRendererContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,SAAS,CAAC;AAE1F;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,uBAAuB,4CAA0D,CAAC;AAE/F,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,QAAO,iBAAiB,GAAG,SACtB,CAAC"}

package/dist/components/Description/markdownRendererContext.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMarkdownRenderer = exports.MarkdownRendererContext = void 0;
+var react_1 = require("react");
+/**
+ * The renderer `Description` draws markdown with, when a host supplies one.
+ *
+ * This package renders markdown in exactly one place — a field's description —
+ * but an application that has field descriptions has markdown everywhere else
+ * too: on its object pages, in its catalogues, in its chat transcripts. When
+ * reqraft draws descriptions with its own dialect and the host draws everything
+ * else with its own, the same text renders two different ways depending on which
+ * surface it landed on, and neither side can tell which one the reader saw.
+ *
+ * So the host's renderer wins where there is one. The built-in is a fallback for
+ * hosts that have no renderer of their own, not a second opinion.
+ */
+exports.MarkdownRendererContext = (0, react_1.createContext)(undefined);
+/** Returns the host-supplied markdown renderer, or `undefined` for the built-in. */
+var useMarkdownRenderer = function () {
+    return (0, react_1.useContext)(exports.MarkdownRendererContext);
+};
+exports.useMarkdownRenderer = useMarkdownRenderer;
+//# sourceMappingURL=markdownRendererContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdownRendererContext.js","sourceRoot":"","sources":["../../../src/components/Description/markdownRendererContext.tsx"],"names":[],"mappings":";;;AAAA,+BAA6D;AAW7D;;;;;;;;;;;;GAYG;AACU,QAAA,uBAAuB,GAAG,IAAA,qBAAa,EAAgC,SAAS,CAAC,CAAC;AAE/F,oFAAoF;AAC7E,IAAM,mBAAmB,GAAG;IACjC,OAAA,IAAA,kBAAU,EAAC,+BAAuB,CAAC;AAAnC,CAAmC,CAAC;AADzB,QAAA,mBAAmB,uBACM"}

package/dist/components/form/engine/CompactRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompactRow.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/CompactRow.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,eAAe,EAGhB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,KAAe,MAAM,OAAO,CAAC;AAqGpC,eAAO,MAAM,UAAU,yGAQlB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,6CAu2CF,CAAC"}
+{"version":3,"file":"CompactRow.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/CompactRow.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAqC,MAAM,8BAA8B,CAAC;AAGlG,OAAO,KAAe,MAAM,OAAO,CAAC;AA8GpC,eAAO,MAAM,UAAU,yGAQlB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,6CAk8CF,CAAC"}

package/dist/components/form/engine/CompactRow.js

@@ -70,12 +70,21 @@ var templates_1 = require("../../../helpers/templates");
 var common_1 = require("../../../helpers/common");
 var ReadOnlyTemplateTag_1 = require("../fields/template/ReadOnlyTemplateTag");
 var Description_1 = require("../../Description");
+var markdownRendererContext_1 = require("../../Description/markdownRendererContext");
 var FocusedEditing_1 = require("../../FocusedEditing");
 var compactRowContext_1 = require("./compactRowContext");
 var compactRowStyles_1 = require("./compactRowStyles");
 var OptionFieldMessages_1 = require("./OptionFieldMessages");
 var readFirst_1 = require("./readFirst");
 var StructuredDataView_1 = require("./_structuredData/StructuredDataView");
+/**
+ * Does this markdown value have more document in it than one row can show?
+ *
+ * Blank trailing lines do not count: a textarea leaves them behind constantly,
+ * and a one-line description that gained a stray newline must not suddenly
+ * grow an inset.
+ */
+var isMultilineMarkdown = function (value) { return value.trim().includes('\n'); };
 // Types whose editors are too tall/nested to edit in-row — these keep the edit
 // card; `arg_schema` and operator fields are excluded separately.
 var COMPACT_COMPLEX_TYPES = new Set([
@@ -135,6 +144,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var commitMode = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.commitMode; });
     var options = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.options; });
     var codePreviewRenderer = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.codePreviewRenderer; });
+    var markdownRenderer = (0, markdownRendererContext_1.useMarkdownRenderer)();
     var operators = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.operators; });
     var focusedEditing = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.focusedEditing; });
     var showFieldTypes = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.showFieldTypes; });
@@ -175,6 +185,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var cDanger = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cDanger; });
     var cWarning = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cWarning; });
     var cInfo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cInfo; });
+    // A markdown value renders as a document in the row's inset; the host's
+    // renderer when it supplied one, reqraft's own otherwise.
     // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
     // its "N fields" summary (sub-fields reveal beneath the row).
     var renderReadFirstValue = function (field, schema, formatted) {
@@ -195,7 +207,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             var swatch = (0, readFirst_1.colorToCss)(field === null || field === void 0 ? void 0 : field.value);
             return ((0, jsx_runtime_1.jsxs)("span", { style: swatch ? __assign(__assign({}, wrapStyle), { 
                     // a slight wash of the chosen colour behind the swatch + hex
-                    background: "color-mix(in srgb, ".concat(swatch, " 14%, transparent)"), padding: '1px 8px', borderRadius: 4 }) : wrapStyle, children: [swatch ? (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledColorSwatch, { "aria-hidden": true, "$color": swatch, "$border": cDivider }) : null, (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted })] }));
+                    background: "color-mix(in srgb, ".concat(swatch, " 14%, transparent)"), padding: '1px 8px', borderRadius: 4 }) : wrapStyle, children: [swatch ?
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledColorSwatch, { "aria-hidden": true, "$color": swatch, "$border": cDivider })
+                        : null, (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted })] }));
         }
         if (valueType === 'file') {
             var fileSize = (0, readFirst_1.getFileSize)(field === null || field === void 0 ? void 0 : field.value);
@@ -217,6 +231,22 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             var chars = field.value.length;
             return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: 'info', icon: 'CodeLine', label: "".concat(lines, " ").concat(lines === 1 ? 'line' : 'lines'), labelKey: "".concat(chars, " ").concat(chars === 1 ? 'char' : 'chars') }));
         }
+        // Markdown read summary: the row prints the value's prose (the markdown
+        // markers are stripped by `formatOptionValue`), so a multi-line document
+        // gets a chip carrying what the one truncated line cannot -- how much
+        // more there is -- and renders in full in the inset below, exactly as a
+        // code value does. A single-line value needs neither: its one line IS
+        // the whole document, already rendered as prose.
+        if (valueType === 'markdown' &&
+            typeof (field === null || field === void 0 ? void 0 : field.value) === 'string' &&
+            isMultilineMarkdown(field.value)) {
+            // Only the count is chipped. Putting the prose inside the tag as well
+            // tints the whole row width, and a description then reads as one giant
+            // label rather than as the text it is. The guard above means the count
+            // is never 1.
+            var lines = field.value.trim().split('\n').length;
+            return ((0, jsx_runtime_1.jsxs)("span", { style: wrapStyle, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: 'info', icon: 'MarkdownLine', label: "".concat(lines, " lines") }), (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted })] }));
+        }
         // Selected allowed-value / enum item with a logo (e.g. language images):
         // render it beside the value, where it belongs — not as the field's icon.
         var allowedImage = (0, readFirst_1.getAllowedValueImage)(field === null || field === void 0 ? void 0 : field.value, schema);
@@ -321,9 +351,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var changed = !hidden && !readOnly && hasOptionChanged(optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName);
     // "Has a value" = set to anything non-empty. Drives the edit-row Clear
     // button and the cluster node's filled state (see `memberSet`).
-    var hasValue = (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== undefined &&
-        (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== null &&
-        (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== '';
+    var hasValue = (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== undefined && (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== null && (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== '';
     // Required-group membership shows a PERSISTENT chip on every member: amber
     // "One of" while the group is unmet (tap → flash siblings), then a muted-green
     // resolution once satisfied — "Covers" on the field that satisfied it,
@@ -344,8 +372,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var chipGroups = unmetGroups.length ? unmetGroups : memberGroups;
     var groupResolved = !!memberGroups.length && !unmetGroups.length;
     var requiredGroupChip = !hidden && !readOnly && memberGroups.length && !(schema === null || schema === void 0 ? void 0 : schema.required) ?
-        (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, role: 'presentation', onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.stopPropagation(); }, onMouseEnter: function () { return setHighlightedOptions(requiredGroupsInfo.members[chipGroups[0]] || []); }, onMouseLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-required-group', size: 'tiny', minimal: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 }, intent: groupResolved ? 'success' : 'warning', icon: groupResolved ? 'CheckLine' : 'LinkM', label: !groupResolved ? 'One of'
-                    : coveredByLabel ? "Covered by \u201C".concat(coveredByLabel, "\u201D")
+        (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, role: 'presentation', onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.stopPropagation(); }, onMouseEnter: function () {
+                return setHighlightedOptions(requiredGroupsInfo.members[chipGroups[0]] || []);
+            }, onMouseLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-required-group', size: 'tiny', minimal: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 }, intent: groupResolved ? 'success' : 'warning', icon: groupResolved ? 'CheckLine' : 'LinkM', label: !groupResolved ? 'One of'
+                    : coveredByLabel ?
+                        "Covered by \u201C".concat(coveredByLabel, "\u201D")
                         : 'Covers', filterable: chipGroups.reduce(function (n, g) { return n + requiredGroupsInfo.members[g].length; }, 0) > 6, items: chipGroups.flatMap(function (groupName) { return __spreadArray(__spreadArray([], (chipGroups.length > 1 ?
                     [{ divider: true, label: groupName, dividerAlign: 'left' }]
                     : []), true), requiredGroupsInfo.members[groupName].map(function (member) {
@@ -360,8 +391,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 }), true); }) }) })
         : null;
     var fixedAllowedValueOption = (0, readFirst_1.isFixedCompactAllowedValueOption)(schema);
-    var editType = (_d = (fixedAllowedValueOption
-        ? (schema === null || schema === void 0 ? void 0 : schema.type) || (schema === null || schema === void 0 ? void 0 : schema.ui_type)
+    var editType = (_d = (fixedAllowedValueOption ?
+        (schema === null || schema === void 0 ? void 0 : schema.type) || (schema === null || schema === void 0 ? void 0 : schema.ui_type)
         : (schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type))) !== null && _d !== void 0 ? _d : '';
     // Scalars edit in place inside the row; complex fields (tall or nested
     // editors) still open the expanded card below.
@@ -557,7 +588,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                         event.preventDefault();
                                         collapse_1();
                                     }
-                                }, children: [label, required ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' }) : null, helpIcon] }), labelShortDesc ?
+                                }, children: [label, required ?
+                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' })
+                                        : null, helpIcon] }), labelShortDesc ?
                                 (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: 0.55 }, children: labelShortDesc })
                                 : null] }), (0, jsx_runtime_1.jsx)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
                             if (event.key === 'Escape') {
@@ -595,9 +628,12 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                         alignItems: 'flex-start',
                         justifyContent: 'space-between',
                         gap: 12,
-                    }, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardHeading, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardLabel, { "$color": cKey, children: [(schema === null || schema === void 0 ? void 0 : schema.icon) || (schema === null || schema === void 0 ? void 0 : schema.image) ?
+                    }, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardHeading, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardLabel, { "$color": cKey, children: [((schema === null || schema === void 0 ? void 0 : schema.icon) ||
+                                            (schema === null || schema === void 0 ? void 0 : schema.image)) ?
                                             (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: schema === null || schema === void 0 ? void 0 : schema.icon, image: schema === null || schema === void 0 ? void 0 : schema.image, size: '14px' })
-                                            : null, (0, jsx_runtime_1.jsxs)("span", { children: [label, required ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' }) : null] }), cardBadges.map(function (badge, index) {
+                                            : null, (0, jsx_runtime_1.jsxs)("span", { children: [label, required ?
+                                                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' })
+                                                    : null] }), cardBadges.map(function (badge, index) {
                                             return typeof badge === 'object' ?
                                                 (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({ size: 'small', minimal: true, className: 'options-readfirst-card-badge' }, badge), index)
                                                 : (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, className: 'options-readfirst-card-badge', label: badge }, index);
@@ -627,9 +663,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // A hash row reveals its sub-fields as read-only sub-rows under a "view
     // more" disclosure; the row itself still expands the real editor on click.
     var valueType = (0, readFirst_1.getValueType)(optionField, schema);
-    var hashEntries = !hidden &&
+    var hashEntries = (!hidden &&
         (valueType === 'hash' || valueType === 'free-hash') &&
-        (schema === null || schema === void 0 ? void 0 : schema.ui_type) !== 'schema-definition' ?
+        (schema === null || schema === void 0 ? void 0 : schema.ui_type) !== 'schema-definition') ?
         (0, readFirst_1.getHashEntries)(optionField, schema)
         : [];
     // A LIST OF HASHES/objects gets the same expandable structured preview a hash
@@ -656,6 +692,25 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         valueType === 'code-editor' &&
         typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
         optionField.value.length > 0;
+    // Markdown reads the same way for the same reason: the row itself can only
+    // show a line of text, and for markdown that line is the SOURCE — the reader
+    // gets `## ` and `**` where the point of the value is what it looks like
+    // rendered. The document renders in the same inset the code preview uses,
+    // through the host's renderer, so the row shows the description the way the
+    // page it describes will.
+    //
+    // Only a MULTI-LINE document earns the inset. A one-liner is already fully
+    // rendered as the row's own text, and a second copy of it below would make
+    // every description row tall for nothing.
+    var showMarkdownPreview = !hidden &&
+        !showCodePreview &&
+        !!markdownRenderer &&
+        // keyed on the schema's ui_type, not on getValueType(): a markdown value
+        // IS a string and the value type says so, which is the whole distinction
+        // between how a value is stored and which editor draws it
+        (schema === null || schema === void 0 ? void 0 : schema.ui_type) === 'markdown' &&
+        typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
+        isMultilineMarkdown(optionField.value);
     var typeLabel = showFieldTypes ?
         "<".concat((schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type) || 'auto').concat((schema === null || schema === void 0 ? void 0 : schema.ui_element_type) ? "[".concat(schema.ui_element_type, "]") : '', ">")
         : null;
@@ -729,7 +784,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     };
     // Row chrome: icon/image before the label; schema `intent` as the edge
     // stripe (message-severity stripes win when both apply).
-    var rowChromeIcon = (schema === null || schema === void 0 ? void 0 : schema.icon) || (schema === null || schema === void 0 ? void 0 : schema.image) ?
+    var rowChromeIcon = ((schema === null || schema === void 0 ? void 0 : schema.icon) ||
+        (schema === null || schema === void 0 ? void 0 : schema.image)) ?
         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: schema === null || schema === void 0 ? void 0 : schema.icon, image: schema === null || schema === void 0 ? void 0 : schema.image, size: '14px', className: 'options-readfirst-row-icon' })
         : null;
     var rowSchemaIntentColor = (schema === null || schema === void 0 ? void 0 : schema.intent) ?
@@ -761,7 +817,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         : dotStatus === 'todo' ? cWarning
             : dotStatus === 'set' ? cSuccess || cInfo
                 : undefined;
-    var row = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, role: 'button', tabIndex: 0, "aria-label": label, className: "readfirst-row options-readfirst-value".concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(showLabelDesc ? ' readfirst-row-info-open' : '').concat(panelMessages.length || showStructuredPreview || showCodePreview ? ' readfirst-row-tall' : '').concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: stripeStyle, onClick: activate, onKeyDown: function (event) {
+    var row = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, role: 'button', tabIndex: 0, "aria-label": label, className: "readfirst-row options-readfirst-value".concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(showLabelDesc ? ' readfirst-row-info-open' : '').concat(panelMessages.length || showStructuredPreview || showCodePreview || showMarkdownPreview ? ' readfirst-row-tall' : '').concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: stripeStyle, onClick: activate, onKeyDown: function (event) {
             if (event.key === 'Enter' || event.key === ' ') {
                 event.preventDefault();
                 activate(event);
@@ -784,7 +840,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 // noise -- and a native tooltip holding a few hundred lines is
                 // unreadable anyway. Every other value keeps its hover, which is the
                 // only way to read one that the row had to truncate.
-                title: !empty && !hidden && !showCodePreview && typeof formatted === 'string' ?
+                title: (!empty &&
+                    !hidden &&
+                    !showCodePreview &&
+                    !showMarkdownPreview &&
+                    typeof formatted === 'string') ?
                     formatted
                     : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [(0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted) }), valueReasons.map(function (m, i) { return ((0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-reason', style: { color: reasonColor(m.intent) }, children: m.content }, "".concat(m.content, "-").concat(i))); }), panelMessages.length ?
                         (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-info-panel', children: panelMessages.map(renderInfoStrip) })
@@ -804,6 +864,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                         values: availableOptions,
                                     })
                                     : (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledCodePreview, { className: 'options-readfirst-code', "$bg": cHover, "$border": "".concat(cDivider, "88"), "$fg": cKey, children: optionField.value }) }) })
+                        : null, showMarkdownPreview ?
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-inset options-readfirst-markdown-inset', onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent, { maxCollapsedHeight: 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-markdown', children: markdownRenderer({ value: optionField.value, compact: true }) }) }) })
                         : null] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [!hidden && !fieldDisabled && !clustered && !coveredByLabel ? requiredGroupChip : null, !hidden ? dependsOnChip : null, draftChip, fieldDisabled && !dependencyEntries.length ?
                         (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledActionSlot, { className: 'options-readfirst-trailing-slot', "$width": 18, children: (0, jsx_runtime_1.jsx)("span", { title: fieldDisabledReason, style: { display: 'inline-flex', opacity: 0.45 }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { className: 'options-readfirst-locked', icon: 'LockLine', size: '14px' }) }) })
                         : null, infoToggle ?