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

package/src/utils/markdown-link.ts

@@ -0,0 +1,148 @@
+/**
+ * One link format for the markdown editors and one `rel` rule for the renderers.
+ *
+ * A FOLLOWED link is written as markdown, `[text](url)`, exactly as the editors always wrote it.
+ * A link with an authored `rel` (nofollow, sponsored or ugc, the values Google reads) is written as
+ * an HTML anchor, `<a href="url" rel="sponsored">text</a>`: markdown has no attribute syntax, and
+ * an HTML anchor is what stored content already uses for links that carry attributes (the
+ * sanitizer keeps `rel` on `a`). Reading back accepts both forms, so a link can be switched either
+ * way. Nothing is rewritten unless an editor changes a link.
+ *
+ * Server-safe: no React, no DOM.
+ */
+
+/** The `rel` tokens an author may set on a link. Search engines read these; nothing else is kept. */
+export const AUTHORED_LINK_REL_TOKENS = ['nofollow', 'ugc', 'sponsored'] as const;
+
+export type AuthoredLinkRel = (typeof AUTHORED_LINK_REL_TOKENS)[number];
+
+/** What a renderer adds to every link that opens in a new tab. */
+const NEW_TAB_REL = 'noopener noreferrer';
+
+/** The authored SEO tokens in a `rel` value, in their canonical order. */
+export function authoredRelTokens(rel: string | readonly string[] | null | undefined): AuthoredLinkRel[] {
+  if (!rel) return [];
+  const given = new Set(
+    (typeof rel === 'string' ? rel.split(/\s+/) : rel).map(token => token.trim().toLowerCase()).filter(Boolean),
+  );
+  return AUTHORED_LINK_REL_TOKENS.filter(token => given.has(token));
+}
+
+/** Whether an authored `rel` asks search engines not to follow the link. */
+export function isNofollowRel(rel: string | readonly string[] | null | undefined): boolean {
+  return authoredRelTokens(rel).includes('nofollow');
+}
+
+/**
+ * The `rel` a renderer writes for a link: the author's SEO tokens, plus `noopener noreferrer` when
+ * the link opens in a new tab. `undefined` when there is nothing to write.
+ */
+export function renderedLinkRel(
+  authoredRel: string | readonly string[] | null | undefined,
+  opensInNewTab: boolean,
+): string | undefined {
+  const tokens: string[] = authoredRelTokens(authoredRel);
+  if (opensInNewTab) tokens.push(NEW_TAB_REL);
+  return tokens.length > 0 ? tokens.join(' ') : undefined;
+}
+
+/** A link as the editor's dialog edits it. */
+export interface MarkdownLinkFields {
+  text: string;
+  url: string;
+  /** The authored `rel` values. Empty = a followed link. */
+  rel: AuthoredLinkRel[];
+}
+
+/** A link found in the editor's text, with the range it occupies. */
+export interface MarkdownLinkMatch extends MarkdownLinkFields {
+  start: number;
+  end: number;
+}
+
+// `[text](url)` or `[text](url "title")`, never an image (`![…]`). The text may hold escaped brackets.
+const MARKDOWN_LINK_RE = /(?<!!)\[((?:\\.|[^\]\\])*)\]\(\s*<?([^\s)>]*)>?(?:\s+"[^"]*")?\s*\)/g;
+// One HTML anchor, attributes and text. Nested anchors are not valid HTML, so the first `</a>` ends it.
+const HTML_LINK_RE = /<a\s([^>]*)>([\s\S]*?)<\/a\s*>/gi;
+
+function htmlAttribute(attributes: string, name: string): string | null {
+  const match = new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s"'>]+))`, 'i').exec(attributes);
+  if (!match) return null;
+  return match[1] ?? match[2] ?? match[3] ?? '';
+}
+
+function decodeHtmlEntities(value: string): string {
+  return value
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&');
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function escapeHtmlText(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+/** Brackets end the link text and `<` would open raw HTML (CommonMark), so all three are escaped. */
+function escapeMarkdownLinkText(value: string): string {
+  return value.replace(/([\\[\]<])/g, '\\$1');
+}
+
+function unescapeMarkdownLinkText(value: string): string {
+  return value.replace(/\\([\\[\]<])/g, '$1');
+}
+
+/** A URL inside `(…)` breaks on whitespace and unbalanced parentheses; percent-encode them. */
+function encodeMarkdownUrl(url: string): string {
+  return url.replace(/\s/g, match => encodeURIComponent(match)).replace(/[()]/g, match => encodeURIComponent(match));
+}
+
+/**
+ * The link the selection `[selectionStart, selectionEnd]` is in or on, if any: a markdown link or an
+ * HTML anchor that contains the whole selection (a caret counts when it touches the link).
+ */
+export function findMarkdownLinkAt(
+  text: string,
+  selectionStart: number,
+  selectionEnd: number = selectionStart,
+): MarkdownLinkMatch | null {
+  const from = Math.min(selectionStart, selectionEnd);
+  const to = Math.max(selectionStart, selectionEnd);
+  const contains = (start: number, end: number) => start <= from && to <= end;
+
+  for (const match of text.matchAll(HTML_LINK_RE)) {
+    const start = match.index ?? 0;
+    const end = start + match[0].length;
+    if (!contains(start, end)) continue;
+    const attributes = match[1] ?? '';
+    return {
+      start,
+      end,
+      text: decodeHtmlEntities(match[2] ?? ''),
+      url: decodeHtmlEntities(htmlAttribute(attributes, 'href') ?? ''),
+      rel: authoredRelTokens(htmlAttribute(attributes, 'rel')),
+    };
+  }
+  for (const match of text.matchAll(MARKDOWN_LINK_RE)) {
+    const start = match.index ?? 0;
+    const end = start + match[0].length;
+    if (!contains(start, end)) continue;
+    return { start, end, text: unescapeMarkdownLinkText(match[1] ?? ''), url: match[2] ?? '', rel: [] };
+  }
+  return null;
+}
+
+/** The text that writes a link: markdown when followed, an HTML anchor when it carries a `rel`. */
+export function formatMarkdownLink({ text, url, rel }: MarkdownLinkFields): string {
+  const label = text.length > 0 ? text : url;
+  const tokens = authoredRelTokens(rel);
+  if (tokens.length > 0) {
+    return `<a href="${escapeHtmlAttribute(url)}" rel="${tokens.join(' ')}">${escapeHtmlText(label)}</a>`;
+  }
+  return `[${escapeMarkdownLinkText(label)}](${encodeMarkdownUrl(url)})`;
+}

package/src/utils/markdown-to-plain.ts

@@ -3,15 +3,24 @@
  * (article-body echo in JSON-LD) and chat entity-card preview (clamped previews
  * inside chat cards).
  *
- * The two consumers differ only in pre/post processing — `mode: 'article'`
- * strips code blocks + images + headings + list bullets and preserves paragraph
- * breaks; `mode: 'preview'` collapses everything to a single line. Both share
- * the same inline-marker strip (link / bold / italic / inline-code).
+ * The text is what a reader of the rendered page reads: the markdown is parsed with the SAME
+ * pipeline the renderer uses (remark with GFM and line breaks, then rehype with raw HTML, as in
+ * `components/ui/markdown/engine.tsx`), and the result is the `innerText` of that HTML
+ * (`hast-util-to-text`). So link, emphasis and heading syntax, raw HTML tags (`<a rel>`, `<div>`),
+ * escapes (`\<`) and entities (`&amp;`) all come out as their text; script and style content and
+ * comments do not. Code blocks and images are left out: their content is not prose.
  *
- * All regex patterns are linear (negated character classes, non-greedy with
- * bounded targets) — no nested quantifiers, no catastrophic backtracking on
- * pathological input.
+ * The two consumers differ only in whitespace — `mode: 'article'` keeps paragraph breaks;
+ * `mode: 'preview'` collapses everything to a single line.
  */
+import type { Element, Root } from 'hast';
+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';
 
 export interface MarkdownToPlainOptions {
   /**
@@ -27,8 +36,9 @@ export interface MarkdownToPlainOptions {
   maxChars?: number;
 }
 
-/** Strip inline markdown markers (bold, italic, inline-code, links). Shared
- *  by `extractSections`'s `stripFormattingMarkers` and `markdownToPlainText`. */
+/** Strip inline markdown markers (bold, italic, inline-code, links) from ONE line of text.
+ *  Shared by `extractSections`'s `stripFormattingMarkers` and the heading ids, whose output is
+ *  an anchor: it stays a fixed, regex-only rule so no heading id ever moves. */
 export function stripInlineMarkdown(s: string): string {
   return s
     .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // [text](url) → text
@@ -37,26 +47,58 @@ export function stripInlineMarkdown(s: string): string {
     .replace(/`([^`]+)`/g, '$1'); // `inline code` → inline code
 }
 
+// The renderer's own pipeline, up to the HTML tree. Built once; `runSync` has no async plugins.
+const toHtmlTree = remark()
+  .use(remarkGfm)
+  .use(remarkBreaks)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeRaw);
+
+/** Elements whose content is not prose: code blocks and images. */
+const NOT_PROSE = new Set(['pre', 'img']);
+
+const TABLE_SECTIONS = new Set(['thead', 'tbody', 'tfoot']);
+
+function proseTree(markdown: string): Root {
+  const tree: Root = toHtmlTree.runSync(toHtmlTree.parse(markdown));
+  visit(tree, 'element', (node: Element, index, parent) => {
+    if (NOT_PROSE.has(node.tagName) && parent && index !== undefined) {
+      parent.children.splice(index, 1);
+      return [SKIP, index];
+    }
+    // `innerText` breaks between rows of the same `thead` / `tbody` only, so the last header row
+    // ran into the first body row ("What it buysEnthusiast"). A section followed by another ends
+    // its last row with a line break.
+    if (TABLE_SECTIONS.has(node.tagName) && parent && index !== undefined) {
+      const followedBySection = parent.children
+        .slice(index + 1)
+        .some(sibling => sibling.type === 'element' && TABLE_SECTIONS.has(sibling.tagName));
+      const rows = node.children.filter(
+        (child): child is Element => 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 undefined;
+  });
+  return tree;
+}
+
 export function markdownToPlainText(markdown: string, options: MarkdownToPlainOptions = {}): string {
   const { mode = 'article', maxChars } = options;
 
-  let out = markdown
-    // Fenced code blocks — must run BEFORE inline strippers (otherwise the
-    // backtick-grave strip below grazes them).
-    .replace(/```[\s\S]*?```/g, '')
-    // Images — `![alt](src)` → empty (we drop them entirely in plain text).
-    .replace(/!\[[^\]]*\]\([^)]+\)/g, '');
-
-  out = stripInlineMarkdown(out)
-    // Heading markers (any depth).
-    .replace(/^#+\s*/gm, '')
-    // List bullets at start-of-line.
-    .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
+      // No spaces around a line break (a soft break keeps the space that followed it).
+      .replace(/[^\S\n]*\n[^\S\n]*/g, '\n')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim();
   }
 
   if (maxChars != null && out.length > maxChars) {

package/src/utils/vendor-classification.ts

@@ -1,59 +1,138 @@
 /**
- * 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 const VENDOR_CLASSIFICATIONS = [
-  'open_source',
-  'commercial',
-  'openframe_selected',
-  'openframe_shipped',
-  'openframe_connect',
-] as const;
-
-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;
+}
+
+/**
+ * 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';
 }
 
-export const OPENFRAME_CLASSIFICATIONS: Record<OpenFrameClassification, OpenFrameClassificationCopy> = {
+/** In display order: a filter list shows OpenFrame first, then license, then lifecycle. */
+export const VENDOR_CLASSIFICATION_COPY: Readonly<Record<string, VendorClassificationCopy>> = {
   openframe_selected: {
-    word: 'Selected',
     label: 'OpenFrame Selected',
+    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',
+    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',
+  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:
-      'Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets.',
+      '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' },
   },
 };
 
-export function isVendorClassification(value: string): value is VendorClassificationValue {
-  return (VENDOR_CLASSIFICATIONS as readonly string[]).includes(value);
+/** The enrichment of a classification, or undefined for a value we do not present specially. */
+export function vendorClassificationCopy(value: string | null | undefined): VendorClassificationCopy | undefined {
+  if (!value || !Object.prototype.hasOwnProperty.call(VENDOR_CLASSIFICATION_COPY, value)) return undefined;
+  return VENDOR_CLASSIFICATION_COPY[value];
+}
+
+/** The group of a classification, or undefined for a value with no enrichment. */
+export function vendorClassificationGroup(value: string | null | undefined): VendorClassificationGroup | undefined {
+  return vendorClassificationCopy(value)?.group;
+}
+
+/** A classification drawn with the OpenFrame mark (it has a `word`). */
+export function isOpenFrameClassification(value: string | null | undefined): boolean {
+  return vendorClassificationGroup(value) === 'openframe';
 }
 
-export function isOpenFrameClassification(value: string | null | undefined): value is OpenFrameClassification {
-  return !!value && Object.prototype.hasOwnProperty.call(OPENFRAME_CLASSIFICATIONS, value);
+const DISPLAY_ORDER = Object.keys(VENDOR_CLASSIFICATION_COPY);
+
+/**
+ * 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 function compareVendorClassifications(a: string, b: string): number {
+  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);
 }

package/dist/utils/format-text-stub.d.ts

@@ -1,5 +0,0 @@
-export declare function formatText(text: string): string;
-export declare function truncateText(text: string, maxLength: number): string;
-export declare function formatClassification(classification: string): string;
-export declare function formatPricingModel(pricing: string): string;
-//# sourceMappingURL=format-text-stub.d.ts.map

package/dist/utils/format-text-stub.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"format-text-stub.d.ts","sourceRoot":"","sources":["../../src/utils/format-text-stub.ts"],"names":[],"mappings":"AACA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAGpE;AAED,wBAAgB,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAE1D"}

package/dist/utils/format-text-stub.js

@@ -1,20 +0,0 @@
-"use client";
-function formatText(text) {
-  return text;
-}
-function truncateText(text, maxLength) {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + "...";
-}
-function formatClassification(classification) {
-  return classification.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-}
-function formatPricingModel(pricing) {
-  return pricing.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-}
-export {
-  formatClassification,
-  formatPricingModel,
-  formatText,
-  truncateText
-};

package/src/utils/format-text-stub.ts

@@ -1,17 +0,0 @@
-// Stub for format-text utilities
-export function formatText(text: string): string {
-  return text;
-}
-
-export function truncateText(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + '...';
-}
-
-export function formatClassification(classification: string): string {
-  return classification.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-}
-
-export function formatPricingModel(pricing: string): string {
-  return pricing.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-}