@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-YF4NSSMT.js → chunk-ONKQUJWD.js}

@@ -1,8 +1,12 @@
-import { StreamFade } from './chunk-WSW6ZFAQ.js';
-import { CodeBlock } from './chunk-TOXAGRDQ.js';
+import { StreamFade } from './chunk-UF6EJXPQ.js';
+import { CodeBlock } from './chunk-O76QXRBV.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { View, Text, Linking } from 'react-native';
-import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { View, Text, Linking, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/markdown/parse.ts
@@ -55,6 +59,15 @@ function parseInline(src) {
     }
     if (c === "[") {
       const close = src.indexOf("]", i + 1);
+      if (close > i + 2 && src[i + 1] === "^" && src[close + 1] !== "(") {
+        const ref = src.slice(i + 2, close);
+        if (/^[\w-]+$/.test(ref)) {
+          flush();
+          nodes.push({ type: "cite", ref });
+          i = close + 1;
+          continue;
+        }
+      }
       if (close !== -1 && src[close + 1] === "(") {
         const paren = src.indexOf(")", close + 2);
         if (paren !== -1) {
@@ -164,15 +177,40 @@ function parseMarkdown(content) {
   }
   return blocks;
 }
+function inlineText(nodes) {
+  return nodes.map(
+    (n) => n.type === "text" || n.type === "code" ? n.value : n.type === "br" ? " " : "children" in n ? inlineText(n.children) : ""
+  ).join("");
+}
+function slugify(text, seen) {
+  const base = text.toLowerCase().normalize("NFKD").replace(/\p{M}/gu, "").replace(/[^\p{L}\p{N}\s-]/gu, "").trim().replace(/\s+/g, "-") || "section";
+  const count = seen.get(base) ?? 0;
+  seen.set(base, count + 1);
+  return count === 0 ? base : `${base}-${count}`;
+}
+var DEFAULT_LABELS = {
+  copyLink: (heading) => `Copy link to ${heading}`,
+  linkCopied: (heading) => `Link to ${heading} copied`
+};
 var HEADING_ROLE = {
-  1: "largeTitle",
-  2: "title1",
-  3: "title2",
-  4: "title3",
-  5: "headline",
-  6: "subheadline"
+  ios: {
+    1: ["title1", "700"],
+    2: ["title2", "700"],
+    3: ["title3", "600"],
+    4: ["headline", "600"],
+    5: ["subheadline", "600"],
+    6: ["footnote", "600"]
+  },
+  android: {
+    1: ["headlineSmall", "400"],
+    2: ["titleLarge", "400"],
+    3: ["titleMedium", "500"],
+    4: ["titleSmall", "500"],
+    5: ["labelLarge", "500"],
+    6: ["labelMedium", "500"]
+  }
 };
-function useInlineRenderer() {
+function useInlineRenderer(onLinkPress, renderCitation, linkColor) {
   const { styles } = useStyles(sheet);
   const render = React.useCallback(
     (nodes, keyPrefix) => nodes.map((node, i) => {
@@ -182,6 +220,8 @@ function useInlineRenderer() {
           return /* @__PURE__ */ jsx(Text, { children: node.value }, key);
         case "br":
           return /* @__PURE__ */ jsx(Text, { children: "\n" }, key);
+        case "cite":
+          return renderCitation ? /* @__PURE__ */ jsx(React.Fragment, { children: renderCitation(node.ref) }, key) : /* @__PURE__ */ jsx(Text, { style: styles.cite, children: node.ref }, key);
         case "strong":
           return /* @__PURE__ */ jsx(Text, { style: styles.strong, children: render(node.children, key) }, key);
         case "em":
@@ -196,10 +236,11 @@ function useInlineRenderer() {
           return /* @__PURE__ */ jsx(
             Text,
             {
-              style: styles.link,
+              style: [styles.link, linkColor ? { color: linkColor } : null],
               accessibilityRole: "link",
               onPress: () => {
-                void Linking.openURL(href);
+                if (onLinkPress) onLinkPress(href);
+                else void Linking.openURL(href);
               },
               children: render(node.children, key)
             },
@@ -208,18 +249,69 @@ function useInlineRenderer() {
         }
       }
     }),
-    [styles]
+    [styles, onLinkPress, renderCitation, linkColor]
   );
   return render;
 }
 function Markdown({
   content,
   streaming = false,
-  motion = "none"
+  motion = "none",
+  onLinkPress,
+  renderCitation,
+  platform,
+  size = "md",
+  variant = "default",
+  ink = "default",
+  headingAnchors = false,
+  onCopyHeadingLink,
+  labels: labelsProp,
+  tone = "accent"
 }) {
   const { styles } = useStyles(sheet);
-  const renderInline = useInlineRenderer();
+  const theme = useLoamTheme("markdown");
+  const android = isAndroidIdiom(theme, platform);
+  const toneColor = {
+    accent: void 0,
+    neutral: theme.color.text,
+    good: theme.color.goodOnSoft,
+    warn: theme.color.warnOnSoft,
+    danger: theme.color.dangerOnSoft,
+    info: theme.color.infoOnSoft
+  }[tone];
+  const barColor = {
+    accent: void 0,
+    neutral: theme.color.borderStrong,
+    good: theme.color.good,
+    warn: theme.color.warn,
+    danger: theme.color.danger,
+    info: theme.color.info
+  }[tone];
+  const renderInline = useInlineRenderer(onLinkPress, renderCitation, toneColor);
+  const bodyText = [
+    size === "sm" ? {
+      fontSize: theme.type.subheadline.fontSize,
+      lineHeight: theme.type.subheadline.lineHeight,
+      letterSpacing: theme.type.subheadline.letterSpacing
+    } : null,
+    ink === "strong" ? { color: theme.color.text } : null
+  ];
+  const labels = useLabels("markdown", DEFAULT_LABELS, labelsProp);
   const blocks = React.useMemo(() => parseMarkdown(content), [content]);
+  const anchorIds = React.useMemo(() => {
+    if (!headingAnchors) return null;
+    const seen = /* @__PURE__ */ new Map();
+    return blocks.map((b) => b.type === "heading" ? slugify(inlineText(b.children), seen) : "");
+  }, [blocks, headingAnchors]);
+  const [copiedId, setCopiedId] = React.useState(null);
+  const copyTimer = React.useRef();
+  React.useEffect(() => () => clearTimeout(copyTimer.current), []);
+  const copyHeading = (id) => {
+    onCopyHeadingLink?.(`#${id}`);
+    setCopiedId(id);
+    clearTimeout(copyTimer.current);
+    copyTimer.current = setTimeout(() => setCopiedId(null), 1500);
+  };
   const animate = streaming && motion === "full";
   const prevCount = React.useRef(0);
   const firstRender = React.useRef(true);
@@ -231,77 +323,135 @@ function Markdown({
   const renderBlock = (block, index) => {
     switch (block.type) {
       case "heading":
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           Text,
           {
             accessibilityRole: "header",
-            style: [styles.heading, styles[`h${block.level}`]],
-            children: renderInline(block.children, `h${index}`)
+            "aria-level": block.level,
+            style: [
+              styles.heading,
+              resolveTextRole(
+                theme,
+                HEADING_ROLE[android ? "android" : "ios"][block.level][0],
+                android
+              ),
+              { fontWeight: HEADING_ROLE[android ? "android" : "ios"][block.level][1] }
+            ],
+            children: [
+              renderInline(block.children, `h${index}`),
+              anchorIds?.[index] ? /* @__PURE__ */ jsx(
+                HeadingAnchor,
+                {
+                  copied: copiedId === anchorIds[index],
+                  label: inlineText(block.children),
+                  labels,
+                  onPress: () => copyHeading(anchorIds[index])
+                }
+              ) : null
+            ]
           }
         );
       case "paragraph":
-        return /* @__PURE__ */ jsx(Text, { style: styles.paragraph, children: renderInline(block.children, `p${index}`) });
+        return /* @__PURE__ */ jsx(Text, { style: [styles.paragraph, bodyText], children: renderInline(block.children, `p${index}`) });
       case "hr":
         return /* @__PURE__ */ jsx(View, { style: styles.hr, accessibilityRole: "none" });
       case "code":
-        return /* @__PURE__ */ jsx(CodeBlock, { code: block.value, language: block.lang ?? void 0, showLineNumbers: false });
+        return /* @__PURE__ */ jsx(
+          CodeBlock,
+          {
+            code: block.value,
+            language: block.lang ?? void 0,
+            showLineNumbers: false
+          }
+        );
       case "blockquote":
-        return /* @__PURE__ */ jsxs(View, { style: styles.blockquote, children: [
-          /* @__PURE__ */ jsx(View, { style: styles.blockquoteBar }),
+        return /* @__PURE__ */ jsxs(View, { ...{ role: "blockquote" }, style: styles.blockquote, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              accessible: false,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              "aria-hidden": true,
+              style: [styles.blockquoteBar, barColor ? { backgroundColor: barColor } : null]
+            }
+          ),
           /* @__PURE__ */ jsx(Text, { style: styles.blockquoteText, children: renderInline(block.children, `q${index}`) })
         ] });
       case "list":
-        return /* @__PURE__ */ jsx(View, { style: styles.list, children: block.items.map((item, j) => /* @__PURE__ */ jsxs(View, { style: styles.listItem, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.marker, children: block.ordered ? `${block.start + j}.` : "\u2022" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.listItemText, children: renderInline(item, `l${index}-${j}`) })
+        return /* @__PURE__ */ jsx(View, { role: "list", style: styles.list, children: block.items.map((item, j) => /* @__PURE__ */ jsxs(View, { role: "listitem", style: styles.listItem, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              accessibilityElementsHidden: !block.ordered,
+              importantForAccessibility: block.ordered ? "auto" : "no-hide-descendants",
+              "aria-hidden": block.ordered ? void 0 : true,
+              style: styles.marker,
+              children: block.ordered ? `${block.start + j}.` : "\u2022"
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: [styles.listItemText, bodyText], children: renderInline(item, `l${index}-${j}`) })
         ] }, j)) });
     }
   };
-  return /* @__PURE__ */ jsx(View, { style: styles.root, children: blocks.map((block, i) => {
-    const el = renderBlock(block, i);
-    if (animate && i >= baseline) {
-      return /* @__PURE__ */ jsx(StreamFade, { children: el }, i);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [styles.root, variant === "card" ? styles.card : null, variant === "soft" ? styles.soft : null],
+      "aria-busy": streaming || void 0,
+      children: blocks.map((block, i) => {
+        const el = renderBlock(block, i);
+        if (animate && i >= baseline) {
+          return /* @__PURE__ */ jsx(StreamFade, { children: el }, i);
+        }
+        return /* @__PURE__ */ jsx(React.Fragment, { children: el }, i);
+      })
     }
-    return /* @__PURE__ */ jsx(React.Fragment, { children: el }, i);
-  }) });
+  );
+}
+function HeadingAnchor({
+  copied,
+  label,
+  labels,
+  onPress
+}) {
+  const theme = useLoamTheme("markdown");
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: copied ? labels.linkCopied(label) : labels.copyLink(label),
+      hitSlop: theme.space.s2,
+      onPress,
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: copied ? "check" : "link",
+          size: theme.icon.sm,
+          color: copied ? theme.color.accentStrong : theme.color.text3
+        }
+      )
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   root: { gap: theme.space.s3 },
-  // Headings: the mobile type ramp carries the level; ink stays full.
-  heading: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    color: theme.color.text
-  },
-  h1: {
-    fontSize: theme.type[HEADING_ROLE[1]].fontSize,
-    lineHeight: theme.type[HEADING_ROLE[1]].lineHeight,
-    letterSpacing: theme.type[HEADING_ROLE[1]].letterSpacing
-  },
-  h2: {
-    fontSize: theme.type[HEADING_ROLE[2]].fontSize,
-    lineHeight: theme.type[HEADING_ROLE[2]].lineHeight,
-    letterSpacing: theme.type[HEADING_ROLE[2]].letterSpacing
+  card: {
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
   },
-  h3: {
-    fontSize: theme.type[HEADING_ROLE[3]].fontSize,
-    lineHeight: theme.type[HEADING_ROLE[3]].lineHeight,
-    letterSpacing: theme.type[HEADING_ROLE[3]].letterSpacing
-  },
-  h4: {
-    fontSize: theme.type[HEADING_ROLE[4]].fontSize,
-    lineHeight: theme.type[HEADING_ROLE[4]].lineHeight,
-    letterSpacing: theme.type[HEADING_ROLE[4]].letterSpacing
-  },
-  h5: {
-    fontSize: theme.type[HEADING_ROLE[5]].fontSize,
-    lineHeight: theme.type[HEADING_ROLE[5]].lineHeight,
-    letterSpacing: theme.type[HEADING_ROLE[5]].letterSpacing
+  soft: {
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface2
   },
-  h6: {
-    fontSize: theme.type[HEADING_ROLE[6]].fontSize,
-    lineHeight: theme.type[HEADING_ROLE[6]].lineHeight,
-    letterSpacing: theme.type[HEADING_ROLE[6]].letterSpacing
+  // Headings: the OS title roles in the system face carry the level.
+  heading: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text
   },
   // Body copy — secondary ink, the AA-safe muted foreground on a surface.
   paragraph: {
@@ -324,6 +474,11 @@ var sheet = createStyleSheet((theme) => ({
   // Links use accent-strong (AA against the surface) plus an underline, so the
   // affordance survives greyscale — colour alone is not enough.
   link: { color: theme.color.accentStrong, textDecorationLine: "underline" },
+  cite: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text2
+  },
   list: { gap: theme.space.s2 },
   listItem: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
   marker: {