@flamingo-stack/openframe-frontend-core 0.0.744 → 0.0.747

package/dist/utils/markdown-to-plain.js

@@ -1,14 +1,44 @@
+import { toText } from "hast-util-to-text";
+import rehypeRaw from "rehype-raw";
+import { remark } from "remark";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import { SKIP, visit } from "unist-util-visit";
 function stripInlineMarkdown(s) {
   return s.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/`([^`]+)`/g, "$1");
 }
+const toHtmlTree = remark().use(remarkGfm).use(remarkBreaks).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw);
+const NOT_PROSE = /* @__PURE__ */ new Set(["pre", "img"]);
+const TABLE_SECTIONS = /* @__PURE__ */ new Set(["thead", "tbody", "tfoot"]);
+function proseTree(markdown) {
+  const tree = toHtmlTree.runSync(toHtmlTree.parse(markdown));
+  visit(tree, "element", (node, index, parent) => {
+    if (NOT_PROSE.has(node.tagName) && parent && index !== void 0) {
+      parent.children.splice(index, 1);
+      return [SKIP, index];
+    }
+    if (TABLE_SECTIONS.has(node.tagName) && parent && index !== void 0) {
+      const followedBySection = parent.children.slice(index + 1).some((sibling) => sibling.type === "element" && TABLE_SECTIONS.has(sibling.tagName));
+      const rows = node.children.filter(
+        (child) => child.type === "element" && child.tagName === "tr"
+      );
+      const lastRow = rows[rows.length - 1];
+      if (followedBySection && lastRow) {
+        lastRow.children.push({ type: "element", tagName: "br", properties: {}, children: [] });
+      }
+    }
+    return void 0;
+  });
+  return tree;
+}
 function markdownToPlainText(markdown, options = {}) {
   const { mode = "article", maxChars } = options;
-  let out = markdown.replace(/```[\s\S]*?```/g, "").replace(/!\[[^\]]*\]\([^)]+\)/g, "");
-  out = stripInlineMarkdown(out).replace(/^#+\s*/gm, "").replace(/^\s*[-*+]\s+/gm, "");
+  let out = toText(proseTree(markdown));
   if (mode === "preview") {
     out = out.replace(/\s+/g, " ").trim();
   } else {
-    out = out.replace(/\n{3,}/g, "\n\n").trim();
+    out = out.replace(/[^\S\n]*\n[^\S\n]*/g, "\n").replace(/\n{3,}/g, "\n\n").trim();
   }
   if (maxChars != null && out.length > maxChars) {
     out = out.slice(0, maxChars);

package/dist/utils/vendor-classification.d.ts

@@ -1,26 +1,52 @@
 /**
- * Vendor classifications: the ONE vocabulary of `vendor_classification.classification`.
+ * Vendor classifications: whatever `vendor_classification.classification` holds on the
+ * server. The database owns the vocabulary (its CHECK constraint is the list), the catalog
+ * builds its filters from the rows that exist, and nothing here limits which values are valid.
  *
- * A vendor may carry several (an OpenFrame product is `open_source` and
- * `openframe_selected`). The two OpenFrame ones are drawn with the OpenFrame
- * mark and ONE word, everywhere: a tag on a card, a filter in the catalog.
+ * This module only ENRICHES the values we want to present specially: a curated label, a
+ * tooltip description and a group. A value with no entry still works everywhere, labelled
+ * by title case. To present a new value better, add an entry here; to make it exist, add it
+ * to the database.
  *
- *   - `openframe_selected`: a tool OpenFrame is built on, picked by the team.
- *   - `openframe_shipped`: a tool or OpenFrame product that is in the released product today.
- *   - `openframe_connect`: a service OpenFrame connects to and manages.
+ * Groups:
+ *   - `license`: how the software is licensed.
+ *   - `lifecycle`: where the product is in its life (a tag and a filter; a card's one tag stays the license).
+ *   - `openframe`: drawn with the OpenFrame mark and ONE word (`word`).
  */
-export declare const VENDOR_CLASSIFICATIONS: readonly ["open_source", "commercial", "openframe_selected", "openframe_shipped", "openframe_connect"];
-export type VendorClassificationValue = (typeof VENDOR_CLASSIFICATIONS)[number];
-export type OpenFrameClassification = Extract<VendorClassificationValue, `openframe_${string}`>;
-export interface OpenFrameClassificationCopy {
-    /** The word drawn beside the OpenFrame mark. */
-    word: string;
-    /** The full name, for plain-text surfaces (a select option, an aria label). */
+export type VendorClassificationValue = string;
+export type VendorClassificationGroup = 'license' | 'lifecycle' | 'openframe';
+export interface VendorClassificationCopy {
+    /** The label on a tag, a filter and a plain-text surface. */
     label: string;
     /** What the classification means, for a tooltip. */
     description: string;
+    group: VendorClassificationGroup;
+    /** OpenFrame group only: the one word drawn beside the OpenFrame mark. */
+    word?: string;
+    /** The icon drawn beside the label, by name (resolved by the shared icon resolver), and its tone. */
+    icon?: VendorClassificationIconConfig;
 }
-export declare const OPENFRAME_CLASSIFICATIONS: Record<OpenFrameClassification, OpenFrameClassificationCopy>;
-export declare function isVendorClassification(value: string): value is VendorClassificationValue;
-export declare function isOpenFrameClassification(value: string | null | undefined): value is OpenFrameClassification;
+/**
+ * A classification's icon, as data: `name` is any name the shared resolver knows (an alias such
+ * as `openframe-logo`, an icon of the design set by its kebab name, or a lucide name). `tone`:
+ * `accent` (the brand colour), `neutral` (secondary text on a tile) or `warning`.
+ */
+export interface VendorClassificationIconConfig {
+    name: string;
+    tone: 'accent' | 'neutral' | 'warning';
+}
+/** In display order: a filter list shows OpenFrame first, then license, then lifecycle. */
+export declare const VENDOR_CLASSIFICATION_COPY: Readonly<Record<string, VendorClassificationCopy>>;
+/** The enrichment of a classification, or undefined for a value we do not present specially. */
+export declare function vendorClassificationCopy(value: string | null | undefined): VendorClassificationCopy | undefined;
+/** The group of a classification, or undefined for a value with no enrichment. */
+export declare function vendorClassificationGroup(value: string | null | undefined): VendorClassificationGroup | undefined;
+/** A classification drawn with the OpenFrame mark (it has a `word`). */
+export declare function isOpenFrameClassification(value: string | null | undefined): boolean;
+/**
+ * Sort order for a list of classifications (a filter list): the enriched values in their
+ * display order (OpenFrame Selected, Connect, Shipped, then license, then lifecycle), then
+ * every other value the server holds, alphabetically.
+ */
+export declare function compareVendorClassifications(a: string, b: string): number;
 //# sourceMappingURL=vendor-classification.d.ts.map

package/dist/utils/vendor-classification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vendor-classification.d.ts","sourceRoot":"","sources":["../../src/utils/vendor-classification.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,wGAMzB,CAAC;AAEX,MAAM,MAAM,yBAAyB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,yBAAyB,EAAE,aAAa,MAAM,EAAE,CAAC,CAAC;AAEhG,MAAM,WAAW,2BAA2B;IAC1C,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,uBAAuB,EAAE,2BAA2B,CAkBlG,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,yBAAyB,CAExF;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,IAAI,uBAAuB,CAE5G"}
+{"version":3,"file":"vendor-classification.d.ts","sourceRoot":"","sources":["../../src/utils/vendor-classification.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9E,MAAM,WAAW,wBAAwB;IACvC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,yBAAyB,CAAC;IACjC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,IAAI,CAAC,EAAE,8BAA8B,CAAC;CACvC;AAED;;;;GAIG;AACH,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;CACxC;AAED,2FAA2F;AAC3F,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CA6DzF,CAAC;AAEF,gGAAgG;AAChG,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,wBAAwB,GAAG,SAAS,CAG/G;AAED,kFAAkF;AAClF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,yBAAyB,GAAG,SAAS,CAEjH;AAED,wEAAwE;AACxE,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAEnF;AAID;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CASzE"}

package/dist/utils/vendor-classification.js

@@ -1,36 +1,87 @@
-const VENDOR_CLASSIFICATIONS = [
-  "open_source",
-  "commercial",
-  "openframe_selected",
-  "openframe_shipped",
-  "openframe_connect"
-];
-const OPENFRAME_CLASSIFICATIONS = {
+const VENDOR_CLASSIFICATION_COPY = {
   openframe_selected: {
-    word: "Selected",
     label: "OpenFrame Selected",
-    description: "OpenFrame is a unified platform that integrates multiple open-source IT and security tools into a single dashboard for MSPs. This filter shows vendors selected by our team for their excellence, community support, and MSP-specific value."
+    word: "Selected",
+    description: "OpenFrame is a unified platform that integrates multiple open-source IT and security tools into a single dashboard for MSPs. This filter shows vendors selected by our team for their excellence, community support, and MSP-specific value.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
+  },
+  openframe_connect: {
+    label: "OpenFrame Connect",
+    word: "Connect",
+    description: "Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
   },
   openframe_shipped: {
-    word: "Shipped",
     label: "OpenFrame Shipped",
-    description: "Tools and OpenFrame products that are in the released OpenFrame product today, not on the roadmap."
+    word: "Shipped",
+    description: "Tools and OpenFrame products that are in the released OpenFrame product today, not on the roadmap.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
   },
-  openframe_connect: {
-    word: "Connect",
-    label: "OpenFrame Connect",
-    description: "Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets."
+  open_source: {
+    label: "Open Source",
+    description: "Released under an OSI-approved open-source license.",
+    group: "license",
+    icon: { name: "code", tone: "accent" }
+  },
+  source_available: {
+    label: "Source-available",
+    description: "The source code is public, but the license restricts how it may be used (for example SSPL, BSL, the Elastic License, or limits on company size or on offering it as a service).",
+    group: "license",
+    icon: { name: "file-code", tone: "neutral" }
+  },
+  commercial: {
+    label: "Commercial",
+    description: "Proprietary software sold by the vendor.",
+    group: "license",
+    icon: { name: "dollar", tone: "neutral" }
+  },
+  end_of_life: {
+    label: "End of life",
+    description: "The vendor has discontinued or retired the product. No new releases.",
+    group: "lifecycle",
+    icon: { name: "alert-triangle", tone: "warning" }
+  },
+  end_of_support: {
+    label: "End of support",
+    description: "The vendor no longer provides support or security fixes, though the product can still be obtained.",
+    group: "lifecycle",
+    icon: { name: "clock", tone: "warning" }
+  },
+  unmaintained: {
+    label: "Unmaintained",
+    description: "No release for years and no official end-of-life notice.",
+    group: "lifecycle",
+    icon: { name: "pause-circle", tone: "warning" }
   }
 };
-function isVendorClassification(value) {
-  return VENDOR_CLASSIFICATIONS.includes(value);
+function vendorClassificationCopy(value) {
+  if (!value || !Object.prototype.hasOwnProperty.call(VENDOR_CLASSIFICATION_COPY, value)) return void 0;
+  return VENDOR_CLASSIFICATION_COPY[value];
+}
+function vendorClassificationGroup(value) {
+  return vendorClassificationCopy(value)?.group;
 }
 function isOpenFrameClassification(value) {
-  return !!value && Object.prototype.hasOwnProperty.call(OPENFRAME_CLASSIFICATIONS, value);
+  return vendorClassificationGroup(value) === "openframe";
+}
+const DISPLAY_ORDER = Object.keys(VENDOR_CLASSIFICATION_COPY);
+function compareVendorClassifications(a, b) {
+  const ia = DISPLAY_ORDER.indexOf(a);
+  const ib = DISPLAY_ORDER.indexOf(b);
+  if (ia !== -1 || ib !== -1) {
+    if (ia === -1) return 1;
+    if (ib === -1) return -1;
+    return ia - ib;
+  }
+  return a.localeCompare(b);
 }
 export {
-  OPENFRAME_CLASSIFICATIONS,
-  VENDOR_CLASSIFICATIONS,
+  VENDOR_CLASSIFICATION_COPY,
+  compareVendorClassifications,
   isOpenFrameClassification,
-  isVendorClassification
+  vendorClassificationCopy,
+  vendorClassificationGroup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.744",
+  "version": "0.0.747",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [
@@ -480,6 +480,7 @@
     "framer-motion": "^12.23.12",
     "globals": "^16.4.0",
     "graphql": "^16.12.0",
+    "hast-util-to-text": "^4.0.2",
     "libphonenumber-js": "^1.12.40",
     "lucide-react": "^0.454.0",
     "mermaid": "^11.14.0",
@@ -504,6 +505,7 @@
     "remark": "^15.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-rehype": "^11.1.2",
     "sonner": "^1.2.4",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",

package/src/components/case-studies/share-experience-section.tsx

@@ -7,7 +7,7 @@ import { CapterraIcon } from '../icons-v2-generated/brand-logos/capterra-icon';
 import { G2Icon } from '../icons-v2-generated/brand-logos/g2-icon';
 import { GetappIcon } from '../icons-v2-generated/brand-logos/getapp-icon';
 import { TrustpilotIcon } from '../icons-v2-generated/brand-logos/trustpilot-icon';
-import { accentSentenceMarks } from '../layout/page-heading';
+import { accentSentenceMarks, HeadingLines } from '../layout/page-heading';
 import { BenefitCard, BenefitCardGrid } from '../ui';
 
 /**
@@ -56,11 +56,14 @@ export interface ShareExperienceSectionProps {
 }
 
 const DEFAULT_TITLE: React.ReactNode = (
-  <>
-    Share Your Experience
-    <br />
-    with Fellow MSPs<span className="text-ods-accent">:</span>
-  </>
+  <HeadingLines>
+    {[
+      'Share Your Experience',
+      <>
+        with Fellow MSPs<span className="text-ods-accent">:</span>
+      </>,
+    ]}
+  </HeadingLines>
 );
 
 const DEFAULT_SUBTITLE: React.ReactNode = (

package/src/components/embeds/reddit-embed-client.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef } from 'react';
 import Link from '../../embed-shims/next-link';
 import { formatLargeNumber } from '../../utils/format';
+import { renderedLinkRel } from '../../utils/markdown-link';
 import type { MediaItem as CarouselMediaItem } from '../../utils/media-carousel-utils-stub';
 import { socialCache } from '../../utils/social-embed-cache';
 import { MediaCarousel } from '../media-carousel';
@@ -159,10 +160,13 @@ type RedditListingResponse = Array<{ data?: { children?: Array<{ data?: RedditPo
 
 interface RedditEmbedProps {
   url: string;
+  /** The `rel` the author wrote on the post's link (`nofollow` …), kept on the card's links to the post. */
+  rel?: string;
   maxWidth?: number;
 }
 
-export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
+export function RedditEmbedClient({ url, maxWidth = 700, rel }: RedditEmbedProps) {
+  const postLinkRel = renderedLinkRel(rel, true);
   const { redditProxyUrl } = useRichMarkdownRuntime();
   const [redditData, setRedditData] = useState<RedditPost | null>(null);
   const [loading, setLoading] = useState(true);
@@ -261,7 +265,7 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
             <Link
               href={url}
               target="_blank"
-              rel="noopener noreferrer"
+              rel={postLinkRel}
               className="inline-flex items-center space-x-2 rounded-md bg-[#FF4500] px-4 py-2 text-white transition-colors text-h6 hover:bg-[#E03D00]"
             >
               <RedditIcon />
@@ -562,7 +566,7 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
           <Link
             href={url}
             target="_blank"
-            rel="noopener noreferrer"
+            rel={postLinkRel}
             className="inline-flex items-center space-x-2 text-ods-accent transition-colors text-h6 hover:opacity-80"
           >
             <ExternalLinkIcon />

package/src/components/embeds/twitter-embed-client.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef } from 'react';
 import Image from '../../embed-shims/next-image';
 import Link from '../../embed-shims/next-link';
+import { renderedLinkRel } from '../../utils/markdown-link';
 import { socialCache } from '../../utils/social-embed-cache';
 import { XLogoIcon } from '../icons-v2-generated/brand-logos/x-logo-icon';
 import { TwitterContainer } from './embed-container';
@@ -71,11 +72,14 @@ interface TwitterOEmbedResponse {
 
 interface TwitterEmbedProps {
   url: string;
+  /** The `rel` the author wrote on the post's link (`nofollow` …), kept on the card's links to the post. */
+  rel?: string;
   tweetId?: string;
   maxWidth?: number;
 }
 
-export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbedProps) {
+export function TwitterEmbedClient({ url, tweetId, maxWidth = 700, rel }: TwitterEmbedProps) {
+  const postLinkRel = renderedLinkRel(rel, true);
   const { twitterProxyUrl } = useRichMarkdownRuntime();
   const [tweetData, setTweetData] = useState<TwitterOEmbedResponse | null>(null);
   const [fetchLoading, setLoading] = useState(true);
@@ -179,7 +183,7 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
             <Link
               href={url}
               target="_blank"
-              rel="noopener noreferrer"
+              rel={postLinkRel}
               className="inline-flex items-center space-x-2 rounded-md bg-ods-bg-surface px-4 py-2 text-ods-text-primary transition-colors text-h6 hover:bg-ods-bg-active"
             >
               <XIcon />
@@ -318,7 +322,7 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
           <Link
             href={url}
             target="_blank"
-            rel="noopener noreferrer"
+            rel={postLinkRel}
             className="inline-flex items-center space-x-2 text-ods-accent transition-colors text-h6 hover:opacity-80"
           >
             <ExternalLinkIcon />

package/src/components/layout/page-heading.tsx

@@ -68,6 +68,41 @@ export function PageHeading({
   );
 }
 
+/**
+ * THE way a heading is drawn on more than one line: each line on its own line,
+ * with a space before every break. The space is what keeps the heading's TEXT
+ * (what search engines, screen readers and link previews read) in words:
+ * "own. Approved", never "own.Approved". It sits at the end of a line, where it
+ * draws nothing. An empty line is a blank line.
+ *
+ * Every multi-line title goes through this; never write a bare `<br />` or one
+ * block `<span>` per line in a heading. The lines are its children, so anything
+ * that walks a title's children (the accent marks) reaches every line.
+ */
+export interface HeadingLinesProps {
+  /** The title's lines, top to bottom: one child per line. */
+  children: ReactNode;
+}
+
+export function HeadingLines({ children }: HeadingLinesProps) {
+  return (
+    <>
+      {Children.toArray(children).map((line, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: a title's lines never reorder
+        <Fragment key={index}>
+          {index > 0 ? (
+            <>
+              {' '}
+              <br />
+            </>
+          ) : null}
+          {line}
+        </Fragment>
+      ))}
+    </>
+  );
+}
+
 /** A sentence mark inside a title: `.`, `:`, `?` or `!` that ends a sentence (followed by a space or the end). */
 const SENTENCE_MARK = /([.:?!]+)(?=\s|$)/g;
 const ONLY_MARKS = /^\s*[.:?!]+\s*$/;
@@ -116,17 +151,22 @@ function accentMarks(node: ReactNode, accentClassName: string): ReactNode {
     if (ONLY_MARKS.test(node)) return node;
     const parts = node.split(SENTENCE_MARK);
     if (parts.length === 1) return node;
-    return parts.map((part, index) =>
-      // `split` with one capture group alternates text, mark, text, mark...
-      index % 2 === 1 ? (
-        // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
-        <span key={index} className={accentClassName}>
-          {part}
-        </span>
-      ) : (
-        // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
-        <Fragment key={index}>{part}</Fragment>
-      ),
+    // One node for one string, so a list of children keeps its length (each of `HeadingLines`' lines stays one line).
+    return (
+      <>
+        {parts.map((part, index) =>
+          // `split` with one capture group alternates text, mark, text, mark...
+          index % 2 === 1 ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
+            <span key={index} className={accentClassName}>
+              {part}
+            </span>
+          ) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: the parts of one string never reorder
+            <Fragment key={index}>{part}</Fragment>
+          ),
+        )}
+      </>
     );
   }
   if (Array.isArray(node)) {
@@ -225,6 +265,7 @@ export function SectionHeading({
         // `contents`: the element names the heading and draws no box, so the stack lays its two children out as before.
         <Tag className="contents">
           {eyebrowNode}
+          {/* A space between the eyebrow and the title, so the heading's text reads "Eyebrow Title", not "EyebrowTitle". */}{' '}
           <span className={`block ${layout.heading}`} data-section-heading>
             {headingText}
           </span>

package/src/components/ui/filter-checkbox-item.tsx

@@ -1,30 +1,46 @@
 'use client';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';
 
 export interface FilterCheckboxItemProps {
-  label: string;
+  /** Text, or a richer label (an icon with a word and a tooltip). */
+  label: ReactNode;
+  /** The accessible name when `label` is not plain text. */
+  ariaLabel?: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
   count?: number;
+  /** Ignore clicks (e.g. while a navigation started by this filter is pending). */
+  disabled?: boolean;
   className?: string;
 }
 
-export function FilterCheckboxItem({ label, checked, onChange, count, className }: FilterCheckboxItemProps) {
+export function FilterCheckboxItem({
+  label,
+  ariaLabel,
+  checked,
+  onChange,
+  count,
+  disabled,
+  className,
+}: FilterCheckboxItemProps) {
   return (
     <div
       className={cn(
         'flex items-center gap-3 border-b border-ods-border bg-ods-card last:border-b-0',
-        'cursor-pointer transition-colors hover:bg-ods-bg-hover',
+        disabled ? 'cursor-wait opacity-70' : 'cursor-pointer transition-colors hover:bg-ods-bg-hover',
         count !== undefined ? 'px-4 py-3' : 'p-3',
         className,
       )}
-      onClick={() => onChange(!checked)}
+      onClick={() => !disabled && onChange(!checked)}
     >
       <CheckboxPrimitive.Root
         checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}
         onCheckedChange={c => onChange(c === true)}
         className={cn(
           'h-6 w-6 shrink-0 rounded-[6px] border-2',
@@ -37,7 +53,7 @@ export function FilterCheckboxItem({ label, checked, onChange, count, className
           <CheckboxCheckmarkIcon size={10} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <span className="flex-1 text-ods-text-primary text-h4">{label}</span>
+      <span className="min-w-0 flex-1 text-ods-text-primary text-h4">{label}</span>
       {count !== undefined && (
         <span className="shrink-0 text-ods-text-secondary text-h5">{count.toLocaleString()}</span>
       )}

package/src/components/ui/index.ts

@@ -204,6 +204,7 @@ export * from './tag-key-value-filter';
 
 // Markdown Editor (MDEditor-based)
 export * from './markdown-editor';
+export * from './markdown-link-command';
 
 // File Upload
 export * from './file-upload';

package/src/components/ui/layout-hold.tsx

@@ -1,5 +1,8 @@
-import type { ReactNode } from 'react';
+'use client';
+
+import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
+import { SkeletonText } from './skeleton';
 
 /**
  * Holding a layout while its content is read, the two ways that are right at
@@ -10,7 +13,8 @@ import { cn } from '../../utils/cn';
  *
  * - `TextHold`: an inline stand-in exactly as wide as the words it is given
  *   (same font, same letter spacing, because it IS those words, not shown).
- *   `bar` draws it as a pulsing grey bar; `blank` only keeps its space.
+ *   `bar` draws a `SkeletonText` of as many lines as the words take; `blank`
+ *   only keeps their space.
  * - `LayoutHold`: a block as tall as the real layout rendered inside it, kept
  *   invisible and inert: the layout's own height, at any width.
  *
@@ -19,27 +23,51 @@ import { cn } from '../../utils/cn';
 export interface TextHoldProps {
   /** The words whose width is held (the content's own, or a stand-in of its length). */
   children: ReactNode;
-  /** `bar`: a pulsing grey bar of that width. `blank`: the width only. */
+  /** `bar`: a `SkeletonText` of as many lines as the words take. `blank`: the space only. */
   variant?: 'bar' | 'blank';
   className?: string;
 }
 
 export function TextHold({ children, variant = 'bar', className }: TextHoldProps) {
+  const hold = useRef<HTMLSpanElement>(null);
+  const words = useRef<HTMLSpanElement>(null);
+  const lines = useLineCount(hold, words, variant === 'bar');
   return (
     <span
+      ref={hold}
       aria-hidden
-      className={cn(
-        variant === 'bar' ? 'animate-pulse rounded bg-ods-border text-transparent' : 'invisible',
-        // A hold is never selectable or clickable, whatever it wraps.
-        'pointer-events-none select-none',
-        className,
-      )}
+      className={cn('pointer-events-none select-none', variant === 'bar' && 'relative inline-block', className)}
     >
-      {children}
+      <span ref={words} className="invisible">
+        {children}
+      </span>
+      {lines > 0 ? (
+        // `justify-around`: each `Skeleton` sits in the middle of the line it stands for.
+        <SkeletonText lines={lines} className="absolute inset-0 flex flex-col justify-around space-y-0" />
+      ) : null}
     </span>
   );
 }
 
+/** How many lines the words take (one box per line), kept current as the width changes. */
+function useLineCount(
+  hold: RefObject<HTMLSpanElement | null>,
+  words: RefObject<HTMLSpanElement | null>,
+  enabled: boolean,
+): number {
+  const [lines, setLines] = useState(0);
+  useLayoutEffect(() => {
+    const box = hold.current;
+    if (!enabled || !box) return undefined;
+    const measure = () => setLines(words.current?.getClientRects().length ?? 0);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [hold, words, enabled]);
+  return lines;
+}
+
 export interface LayoutHoldProps {
   /** The real layout, rendered with the data at hand. */
   children: ReactNode;

package/src/components/ui/markdown/base-components.tsx

@@ -14,6 +14,7 @@ import { useAuthedImageSrc } from '../../../hooks/use-authed-image-src';
 import type { ResolveLinkResult } from '../../../types/doc-source';
 import { cn } from '../../../utils/cn';
 import { slugifyHeadingText } from '../../../utils/markdown-heading-id';
+import { renderedLinkRel } from '../../../utils/markdown-link';
 import { getHashTargetElement, navigateSamePageHash, HUB_HEADER_OFFSET_PX } from '../../../utils/same-page-hash-nav';
 import { extractText, resolveFallbackHeadingId, useAssignedHeadingIds, useHeadingId } from './heading-ids';
 import { MermaidDiagram } from './mermaid-diagram';
@@ -250,7 +251,7 @@ export function buildBaseComponents({
     ),
 
     // --- links ---
-    a: ({ href, children, className: linkClassName }: MdRenderProps<'a'>) => {
+    a: ({ href, children, className: linkClassName, rel: authoredRel }: MdRenderProps<'a'>) => {
       const isBroken = href !== undefined && brokenLinks.includes(href);
       const isInternalDocLink =
         propCurrentPath !== undefined &&
@@ -339,7 +340,9 @@ export function buildBaseComponents({
           href={href}
           className={`relative text-ods-accent no-underline transition-colors duration-200 after:absolute after:-bottom-0.5 after:left-0 after:h-0.5 after:w-0 after:bg-ods-accent after:transition-all after:duration-300 after:content-[''] hover:after:w-full ${linkClassName || ''}`}
           target={href?.startsWith('http') ? '_blank' : undefined}
-          rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+          // The author's SEO tokens (`<a rel="nofollow">`, the editor's Nofollow choice) are kept;
+          // every other authored token is dropped, and a new-tab link always gets noopener noreferrer.
+          rel={renderedLinkRel(authoredRel, href?.startsWith('http') ?? false)}
           onClick={inPageAnchorId !== null ? handleAnchorClick : undefined}
         >
           {children}