@estiva-app/ui 0.63.0 → 0.64.0

package/dist/index.js

@@ -71,7 +71,7 @@ function cn(...inputs) {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var COVER_CLASSES = "after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:[outline-style:auto]";
 var VARIANT_CLASSES = {
-  text: "text-info-default underline underline-offset-2 hover:opacity-80",
+  text: "text-text-interactive underline underline-offset-2 hover:opacity-80",
   quiet: "hover:underline",
   underlined: "underline underline-offset-2 hover:text-text-primary",
   plain: ""
@@ -2421,28 +2421,52 @@ function InlineChip({ tone = "neutral", icon, href, className, children, ...prop
   return /* @__PURE__ */ jsx33("a", { href, className: classes, ...props, onClick: inApp, children: body });
 }
 
+// src/codeColours.ts
+import { createElement } from "react";
+import { common, createLowlight } from "lowlight";
+var lowlight = createLowlight(common);
+function draw(node, key) {
+  if (node.type === "text") return node.value;
+  return createElement("span", { key, className: node.properties?.className?.join(" ") }, (node.children ?? []).map(draw));
+}
+function codeColours(text, language) {
+  if (!language || !lowlight.registered(language)) return text;
+  return lowlight.highlight(language, text).children.map(draw);
+}
+
 // src/RichText.tsx
 import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var RICH_TEXT_CLASSES = {
-  base: "flex flex-col gap-1 break-words text-text-secondary",
-  /* A heading binds to what follows it: 12px above (8 and the 4px gap), 8px below (4 and the gap); two headings in a row, 12px apart. Level 3 keeps the text's colour, one step lower. */
-  headings: "[&>:is(h1,h2,h3)]:mb-1 [&>:is(h1,h2,h3)]:mt-2 [&>:is(h1,h2,h3):first-child]:mt-0 [&>:is(h1,h2,h3):last-child]:mb-0 [&>:is(h1,h2,h3)+:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2)]:text-text-primary",
-  lists: "[&_:is(ul,ol)]:pl-5 [&_li>p]:m-0 [&_li]:break-words [&_li]:marker:text-text-muted [&_ol]:list-decimal [&_ul]:list-disc",
+  /* Blocks 8px apart (Katerina, 9 October; 4 before). A list's own items stay together. */
+  base: "flex flex-col gap-2 break-words text-text-secondary",
+  /* A heading binds to what follows it: 12px above (4 and the 8px gap), 8px below (the gap); two headings in a row, 12px apart. The same as before the gap grew (Katerina, 9 October: headings do not change). Level 3 keeps the text's colour, one step lower: at the same size as level 2, colour is what tells them apart (Katerina, 9 October). */
+  headings: "[&>:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2,h3):first-child]:mt-0 [&>:is(h1,h2)]:text-text-primary",
+  /* Bullets and numbers in the text's own colour, so a number can be read (Katerina, 9 October; they were the muted grey, 2.4 : 1 in Leaf). */
+  lists: "[&_:is(ul,ol)]:pl-5 [&_li>p]:m-0 [&_li]:break-words [&_li]:marker:text-text-secondary [&_ol]:list-decimal [&_ul]:list-disc",
+  /* The line in the muted text grey, not the border grey: a border grey was 1.3 : 1 in Leaf (Katerina, 9 October). */
   // eslint-disable-next-line token-spacing/no-restricted-classes -- @estiva-escape: the quote line is Peek's, 3px, between the ramp's 2 and 4
-  quote: "[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-border-strong [&_blockquote]:pl-2.5",
-  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.9 of the text around it, so it scales with a heading and with `small`; a named size is fixed
-  code: "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_code]:text-text-primary",
-  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.9 of the text around it; the code inside the block is the block's own size, not 0.9 of it again
-  codeBlock: "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:p-2 [&_pre]:font-mono [&_pre]:text-[0.9em] [&_pre]:text-text-primary",
-  divider: "[&_hr]:border-border-default",
+  quote: "[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-text-muted [&_blockquote]:pl-2.5",
+  /* Code in a sentence is amber, its own colour (Katerina, 9 October: option I). */
+  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it, so it scales with a heading and with `small`; a named size is fixed
+  code: "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-text-code [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
+  /* 12px either side, 10px above and below, looser lines than the text (Katerina, 9 October; 8px all round before). */
+  // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it; the code inside the block is the block's own size, not 0.85 of it again
+  codeBlock: "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary",
+  /* Colours inside a code block, by language: the classes `codeColours` gives each word, after highlight.js's own GitHub theme (Katerina, 9 October). */
+  syntax: "[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag",
+  /* A divider splits the text in two: 16px either side (Katerina, 9 October; 4 before). */
+  divider: "[&_hr]:my-2 [&_hr]:border-border-default",
   table: "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
-  marks: "[&_em]:italic [&_strong]:font-semibold [&_u]:underline [&_u]:underline-offset-2",
-  default: "text-body-2 [&>:is(h2,h3)]:text-body-2 [&>:is(h2,h3)]:font-semibold [&>h1]:text-h4",
-  small: "text-caption leading-snug [&>:is(h2,h3)]:text-caption [&>:is(h2,h3)]:font-semibold [&>h1]:text-body-2 [&>h1]:font-semibold"
+  /* Bold in the heading colour, not only heavier. An underlined word draws a faint line, so it does not read as a link (Katerina, 9 October). */
+  marks: "[&_em]:italic [&_strong]:font-semibold [&_strong]:text-text-primary [&_u]:underline [&_u]:decoration-text-muted [&_u]:underline-offset-2",
+  /* Lines 1.5 apart (Katerina, 9 October; 1.4 before). */
+  default: "text-body-2 leading-normal [&>:is(h2,h3)]:text-body-2 [&>:is(h2,h3)]:font-semibold [&>h1]:text-h4",
+  /* Blocks 6px apart; a heading keeps its 12px above and 8px below. */
+  small: "gap-1.5 text-caption leading-snug [&>:is(h1,h2,h3)]:mb-0.5 [&>:is(h1,h2,h3)]:mt-1.5 [&>:is(h1,h2,h3)+:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2,h3):last-child]:mb-0 [&>:is(h2,h3)]:text-caption [&>:is(h2,h3)]:font-semibold [&>h1]:text-body-2 [&>h1]:font-semibold"
 };
 function richTextClassName(size = "default", className) {
-  const { base, headings, lists, quote, code, codeBlock, divider, table, marks } = RICH_TEXT_CLASSES;
-  return cn(base, headings, lists, quote, code, codeBlock, divider, table, marks, RICH_TEXT_CLASSES[size], className);
+  const { base, headings, lists, quote, code, codeBlock, syntax, divider, table, marks } = RICH_TEXT_CLASSES;
+  return cn(base, headings, lists, quote, code, codeBlock, syntax, divider, table, marks, RICH_TEXT_CLASSES[size], className);
 }
 var LINK_SPLIT = /(\[[^[\]\n]+\]\((?:https?:\/\/|mailto:)[^\s)]+\)|https?:\/\/[^\s]+)/g;
 var WRITTEN_LINK = /^\[([^[\]\n]+)\]\(((?:https?:\/\/|mailto:)[^\s)]+)\)$/;
@@ -2469,15 +2493,15 @@ function textWithLinks(text, renderText) {
     return part ? /* @__PURE__ */ jsx34("span", { children: renderText(part) }, i) : null;
   });
 }
-function Runs({ runs, draw }) {
+function Runs({ runs, draw: draw2 }) {
   return /* @__PURE__ */ jsx34(Fragment8, { children: (runs ?? []).map((run, i) => {
-    if (run.reference) return /* @__PURE__ */ jsx34("span", { children: draw.renderReference(run.reference, run) }, i);
+    if (run.reference) return /* @__PURE__ */ jsx34("span", { children: draw2.renderReference(run.reference, run) }, i);
     if (run.marks.includes("code")) {
       return /* @__PURE__ */ jsx34("code", { children: run.text }, i);
     }
     let node = run.text.split("\n").map((line, j) => /* @__PURE__ */ jsxs25("span", { children: [
       j > 0 && /* @__PURE__ */ jsx34("br", {}),
-      textWithLinks(line, draw.renderText)
+      textWithLinks(line, draw2.renderText)
     ] }, j));
     if (run.marks.includes("underline")) node = /* @__PURE__ */ jsx34("u", { children: node });
     if (run.marks.includes("italic")) node = /* @__PURE__ */ jsx34("em", { children: node });
@@ -2486,7 +2510,7 @@ function Runs({ runs, draw }) {
   }) });
 }
 var named = (block) => block.typeName ?? block.type;
-function Table({ block, draw }) {
+function Table({ block, draw: draw2 }) {
   const rows = (block.children ?? []).filter((row) => named(row) === "tableRow");
   if (!rows.length) return null;
   const cells = (row) => (row.children ?? []).map((cell, i) => {
@@ -2500,8 +2524,8 @@ function Table({ block, draw }) {
         colSpan: colspan && colspan > 1 ? colspan : void 0,
         rowSpan: rowspan && rowspan > 1 ? rowspan : void 0,
         children: [
-          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx34(Runs, { runs: child.inline, draw }, j)),
-          /* @__PURE__ */ jsx34(Runs, { runs: cell.inline, draw })
+          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx34(Runs, { runs: child.inline, draw: draw2 }, j)),
+          /* @__PURE__ */ jsx34(Runs, { runs: cell.inline, draw: draw2 })
         ]
       },
       cell.id ?? i
@@ -2514,10 +2538,10 @@ function Table({ block, draw }) {
     /* @__PURE__ */ jsx34("tbody", { children: (headerRow ? rows.slice(1) : rows).map((row, i) => /* @__PURE__ */ jsx34("tr", { "data-block-id": row.id, children: cells(row) }, row.id ?? i)) })
   ] });
 }
-function Block({ block, draw }) {
-  const own = draw.renderBlock?.(block);
+function Block({ block, draw: draw2 }) {
+  const own = draw2.renderBlock?.(block);
   if (own !== void 0) return own;
-  const runs = /* @__PURE__ */ jsx34(Runs, { runs: block.inline, draw });
+  const runs = /* @__PURE__ */ jsx34(Runs, { runs: block.inline, draw: draw2 });
   switch (block.type) {
     case "heading": {
       if (block.level === 1) return /* @__PURE__ */ jsx34("h1", { "data-block-id": block.id, children: runs });
@@ -2528,24 +2552,24 @@ function Block({ block, draw }) {
       return /* @__PURE__ */ jsx34("p", { "data-block-id": block.id, children: runs });
     case "bulletList":
     case "orderedList": {
-      const items = (block.children ?? []).map((item, i) => /* @__PURE__ */ jsx34("li", { "data-block-id": item.id, children: /* @__PURE__ */ jsx34(Runs, { runs: item.inline, draw }) }, item.id ?? i));
+      const items = (block.children ?? []).map((item, i) => /* @__PURE__ */ jsx34("li", { "data-block-id": item.id, children: /* @__PURE__ */ jsx34(Runs, { runs: item.inline, draw: draw2 }) }, item.id ?? i));
       return block.type === "bulletList" ? /* @__PURE__ */ jsx34("ul", { "data-block-id": block.id, children: items }) : /* @__PURE__ */ jsx34("ol", { "data-block-id": block.id, start: block.start, children: items });
     }
     case "blockquote":
       return /* @__PURE__ */ jsx34("blockquote", { "data-block-id": block.id, children: runs });
     case "codeBlock":
-      return /* @__PURE__ */ jsx34("pre", { "data-block-id": block.id, "data-language": block.language, children: /* @__PURE__ */ jsx34("code", { children: (block.inline ?? []).map((run) => run.text).join("") }) });
+      return /* @__PURE__ */ jsx34("pre", { "data-block-id": block.id, "data-language": block.language, children: /* @__PURE__ */ jsx34("code", { children: codeColours((block.inline ?? []).map((run) => run.text).join(""), block.language) }) });
     case "horizontalRule":
       return /* @__PURE__ */ jsx34("hr", { "data-block-id": block.id });
     case "table": {
-      const table = /* @__PURE__ */ jsx34(Table, { block, draw });
+      const table = /* @__PURE__ */ jsx34(Table, { block, draw: draw2 });
       if ((block.children ?? []).some((row) => named(row) === "tableRow")) return table;
       break;
     }
   }
   return /* @__PURE__ */ jsxs25("div", { "data-block-id": block.id, "data-block-type": named(block), children: [
     runs,
-    (block.children ?? []).map((child, i) => /* @__PURE__ */ jsx34(Block, { block: child, draw }, child.id ?? i))
+    (block.children ?? []).map((child, i) => /* @__PURE__ */ jsx34(Block, { block: child, draw: draw2 }, child.id ?? i))
   ] });
 }
 function RichText({
@@ -2556,8 +2580,8 @@ function RichText({
   renderBlock
 }) {
   if (blocks.length === 0) return null;
-  const draw = { renderText, renderReference, renderBlock };
-  return /* @__PURE__ */ jsx34("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx34(Block, { block, draw }, block.id ?? i)) });
+  const draw2 = { renderText, renderReference, renderBlock };
+  return /* @__PURE__ */ jsx34("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx34(Block, { block, draw: draw2 }, block.id ?? i)) });
 }
 
 // src/KindIcon.tsx