@nuucognition/ncm-ui 0.1.0-dev.1

package/dist/blocks/task-list/index.js

@@ -0,0 +1,670 @@
+"use client";
+import { serializeInlineContent } from '@nuucognition/ncm';
+import { createContext, createElement, useMemo, useContext, useRef, useState, useEffect, useId, useCallback } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { extractExtension, embedTypeFromExtension } from '@nuucognition/mesh-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/blocks/task-list/task-list.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/inline/parser.ts
+function splitOnce(input, delimiter) {
+  const idx = input.indexOf(delimiter);
+  if (idx === -1) {
+    return [input, null];
+  }
+  return [input.slice(0, idx), input.slice(idx + delimiter.length)];
+}
+function parseWikiTarget(rawInside) {
+  const inside = rawInside.trim();
+  const [targetPlusAnchor, displayRaw] = splitOnce(inside, "|");
+  const [targetRaw, anchorRaw] = splitOnce(targetPlusAnchor, "#");
+  const target = targetRaw.trim();
+  const display = displayRaw !== null ? displayRaw.trim() || null : null;
+  const anchor = anchorRaw !== null ? anchorRaw.trim() || null : null;
+  return { target, display, anchor };
+}
+var INLINE_REF_KIND_RE = /^\s*(ref|footnote)\s*:\s*([\s\S]*)$/i;
+function tryParseInlineRef(input) {
+  let depth = 1;
+  let i = 2;
+  for (; i < input.length; i++) {
+    const ch = input[i];
+    if (ch === "[") {
+      depth++;
+    } else if (ch === "]") {
+      depth--;
+      if (depth === 0) break;
+    }
+  }
+  if (depth !== 0) return null;
+  const inner = input.slice(2, i);
+  const length = i + 1;
+  const match = INLINE_REF_KIND_RE.exec(inner);
+  if (match && match[1]) {
+    const kind = match[1].toLowerCase() === "ref" ? "ref" : "footnote";
+    return { token: { type: "inline_ref", kind, content: (match[2] ?? "").trim() }, length };
+  }
+  return { token: { type: "inline_ref", kind: "footnote", content: inner.trim() }, length };
+}
+function parseInline(content) {
+  if (!content) return [];
+  const tokens = [];
+  let remaining = content;
+  while (remaining.length > 0) {
+    const codeMatch = remaining.match(/^`([^`]+)`/);
+    if (codeMatch && codeMatch[1] !== void 0) {
+      tokens.push({ type: "code", content: codeMatch[1] });
+      remaining = remaining.slice(codeMatch[0].length);
+      continue;
+    }
+    const latexMatch = remaining.match(/^\$(?!\s)([^$\n]+?)(?<!\s)\$/);
+    if (latexMatch && latexMatch[1] !== void 0) {
+      tokens.push({ type: "latex", content: latexMatch[1] });
+      remaining = remaining.slice(latexMatch[0].length);
+      continue;
+    }
+    if (remaining.startsWith("^[")) {
+      const inlineRef = tryParseInlineRef(remaining);
+      if (inlineRef) {
+        tokens.push(inlineRef.token);
+        remaining = remaining.slice(inlineRef.length);
+        continue;
+      }
+    }
+    const wikiEmbedMatch = remaining.match(/^!\[\[([^\]]+)\]\]/);
+    if (wikiEmbedMatch && wikiEmbedMatch[1] !== void 0) {
+      const parsed = parseWikiTarget(wikiEmbedMatch[1]);
+      tokens.push({
+        type: "wiki_embed",
+        target: parsed.target,
+        display: parsed.display,
+        anchor: parsed.anchor
+      });
+      remaining = remaining.slice(wikiEmbedMatch[0].length);
+      continue;
+    }
+    const wikiLinkMatch = remaining.match(/^\[\[([^\]]+)\]\]/);
+    if (wikiLinkMatch && wikiLinkMatch[1] !== void 0) {
+      const parsed = parseWikiTarget(wikiLinkMatch[1]);
+      tokens.push({
+        type: "wiki_link",
+        target: parsed.target,
+        display: parsed.display,
+        anchor: parsed.anchor
+      });
+      remaining = remaining.slice(wikiLinkMatch[0].length);
+      continue;
+    }
+    const imageMatch = remaining.match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/);
+    if (imageMatch && imageMatch[1] !== void 0 && imageMatch[2] !== void 0) {
+      tokens.push({
+        type: "image",
+        alt: imageMatch[1],
+        src: imageMatch[2],
+        title: imageMatch[3]
+      });
+      remaining = remaining.slice(imageMatch[0].length);
+      continue;
+    }
+    const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/);
+    if (linkMatch && linkMatch[1] !== void 0 && linkMatch[2] !== void 0) {
+      tokens.push({
+        type: "link",
+        href: linkMatch[2],
+        title: linkMatch[3],
+        children: parseInline(linkMatch[1])
+      });
+      remaining = remaining.slice(linkMatch[0].length);
+      continue;
+    }
+    const boldMatch = remaining.match(/^\*\*(.+?)\*\*|^__(.+?)__/);
+    if (boldMatch) {
+      const innerContent = boldMatch[1] ?? boldMatch[2];
+      if (innerContent !== void 0) {
+        tokens.push({
+          type: "bold",
+          children: parseInline(innerContent)
+        });
+        remaining = remaining.slice(boldMatch[0].length);
+        continue;
+      }
+    }
+    const strikeMatch = remaining.match(/^~~(.+?)~~/);
+    if (strikeMatch && strikeMatch[1] !== void 0) {
+      tokens.push({
+        type: "strikethrough",
+        children: parseInline(strikeMatch[1])
+      });
+      remaining = remaining.slice(strikeMatch[0].length);
+      continue;
+    }
+    const italicMatch = remaining.match(/^\*([^*]+)\*|^_([^_]+)_/);
+    if (italicMatch) {
+      const innerContent = italicMatch[1] ?? italicMatch[2];
+      if (innerContent !== void 0) {
+        tokens.push({
+          type: "italic",
+          children: parseInline(innerContent)
+        });
+        remaining = remaining.slice(italicMatch[0].length);
+        continue;
+      }
+    }
+    const nextSpecial = findNextSpecialChar(remaining);
+    if (nextSpecial > 0) {
+      tokens.push({ type: "text", content: remaining.slice(0, nextSpecial) });
+      remaining = remaining.slice(nextSpecial);
+    } else {
+      tokens.push({ type: "text", content: remaining });
+      remaining = "";
+    }
+  }
+  return mergeAdjacentText(tokens);
+}
+function findNextSpecialChar(content) {
+  const specialChars = ["`", "$", "!", "[", "*", "_", "~", "^"];
+  let minIndex = -1;
+  for (const char of specialChars) {
+    const index = content.indexOf(char);
+    if (index > 0 && (minIndex === -1 || index < minIndex)) {
+      minIndex = index;
+    }
+  }
+  return minIndex;
+}
+function mergeAdjacentText(tokens) {
+  const result = [];
+  for (const token of tokens) {
+    const last = result[result.length - 1];
+    if (token.type === "text" && last?.type === "text") {
+      last.content += token.content;
+    } else {
+      result.push(token);
+    }
+  }
+  return result;
+}
+var NcmContext = createContext(null);
+function useNcmConfig() {
+  return useContext(NcmContext) ?? {};
+}
+function clipBounds(el) {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const s = getComputedStyle(node);
+    if (/(auto|scroll|hidden)/.test(s.overflowX) || /(auto|scroll|hidden)/.test(s.overflowY)) {
+      const r = node.getBoundingClientRect();
+      return { left: r.left, right: r.right, top: r.top, bottom: r.bottom };
+    }
+  }
+  return { left: 0, right: window.innerWidth, top: 0, bottom: window.innerHeight };
+}
+function ReferenceMarker({ kind, number, children }) {
+  const config = useNcmConfig();
+  const popoverEnabled = config.inline?.referencePopover !== false && children != null;
+  const popoverId = useId();
+  const isRef = kind === "ref";
+  const popoverRef = useRef(null);
+  const positionPopover = useCallback(() => {
+    const el = popoverRef.current;
+    if (!el) return;
+    el.style.transform = "";
+    el.style.top = "";
+    el.style.bottom = "";
+    const margin = 8;
+    const bounds = clipBounds(el);
+    const rect = el.getBoundingClientRect();
+    if (rect.bottom > bounds.bottom - margin && rect.height < rect.top - bounds.top) {
+      el.style.top = "auto";
+      el.style.bottom = "1.6em";
+    }
+    let dx = 0;
+    if (rect.right > bounds.right - margin) dx = bounds.right - margin - rect.right;
+    if (rect.left + dx < bounds.left + margin) dx = bounds.left + margin - rect.left;
+    if (dx) el.style.transform = `translateX(${Math.round(dx)}px)`;
+  }, []);
+  const describedBy = popoverEnabled ? popoverId : void 0;
+  const label = `${isRef ? "Reference" : "Footnote"} ${number}`;
+  const marker = isRef ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-ncm-ref-marker": "",
+      tabIndex: 0,
+      role: "note",
+      "aria-label": label,
+      "aria-describedby": describedBy,
+      children: `[${number}]`
+    }
+  ) : /* @__PURE__ */ jsx(
+    "sup",
+    {
+      "data-ncm-ref-marker": "",
+      tabIndex: 0,
+      role: "note",
+      "aria-label": label,
+      "aria-describedby": describedBy,
+      children: number
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-ncm-token": isRef ? "reference" : "footnote",
+      "data-ncm-ref-kind": kind,
+      "data-ncm-ref-number": number,
+      onMouseEnter: popoverEnabled ? positionPopover : void 0,
+      onFocus: popoverEnabled ? positionPopover : void 0,
+      children: [
+        marker,
+        popoverEnabled ? /* @__PURE__ */ jsx("span", { id: popoverId, ref: popoverRef, role: "tooltip", "data-ncm-ref-popover": "", children }) : null
+      ]
+    }
+  );
+}
+var ReferenceBasesContext = createContext(null);
+var BlockReferenceScopeContext = createContext(null);
+function BlockReferenceScope({ blockId, children }) {
+  const bases = useContext(ReferenceBasesContext);
+  const base = (blockId ? bases?.get(blockId) : void 0) ?? { ref: 0, footnote: 0 };
+  const counter = useRef({ ref: 0, footnote: 0 });
+  counter.current = { ref: 0, footnote: 0 };
+  const value = {
+    next(kind) {
+      counter.current[kind] += 1;
+      return base[kind] + counter.current[kind];
+    }
+  };
+  return /* @__PURE__ */ jsx(BlockReferenceScopeContext.Provider, { value, children });
+}
+function useBlockReferenceScope() {
+  return useContext(BlockReferenceScopeContext);
+}
+var INERT_SCOPE = { next: () => 0 };
+function InertReferenceScope({ children }) {
+  return /* @__PURE__ */ jsx(BlockReferenceScopeContext.Provider, { value: INERT_SCOPE, children });
+}
+var katexPromise = null;
+function loadKatex() {
+  if (!katexPromise) {
+    katexPromise = Promise.all([
+      import('katex'),
+      import('katex/dist/katex.min.css')
+    ]).then(([module]) => module.default).catch(() => null);
+  }
+  return katexPromise;
+}
+function useKatexHtml(content, displayMode, enabled = true) {
+  const [katexModule, setKatexModule] = useState(null);
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    let active = true;
+    loadKatex().then((loaded) => {
+      if (active) {
+        setKatexModule(loaded);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [enabled]);
+  return useMemo(() => {
+    if (!enabled || !katexModule) {
+      return null;
+    }
+    try {
+      return katexModule.renderToString(content, {
+        throwOnError: false,
+        displayMode
+      });
+    } catch {
+      return null;
+    }
+  }, [content, displayMode, enabled, katexModule]);
+}
+function InlineContent({
+  content,
+  className,
+  disableBionic,
+  disableBeeline
+}) {
+  const tokens = useMemo(() => parseInline(content), [content]);
+  const hasScope = useBlockReferenceScope() != null;
+  const rendered = tokens.map((token, index) => /* @__PURE__ */ jsx(
+    TokenRenderer,
+    {
+      token,
+      disableBionic,
+      disableBeeline
+    },
+    index
+  ));
+  const body = className ? /* @__PURE__ */ jsx("span", { "data-ncm-inline": "", className, children: rendered }) : /* @__PURE__ */ jsx(Fragment, { children: rendered });
+  return hasScope ? body : /* @__PURE__ */ jsx(BlockReferenceScope, { children: body });
+}
+function TokenRenderer({ token, disableBionic, disableBeeline }) {
+  const config = useNcmConfig();
+  const refScope = useBlockReferenceScope();
+  const bionicOn = !disableBionic && Boolean(config.reading?.bionic);
+  const beelineOn = !disableBeeline && Boolean(config.reading?.beeline);
+  const latexContent = token.type === "latex" ? token.content : "";
+  const latexHtml = useKatexHtml(latexContent, false, token.type === "latex");
+  switch (token.type) {
+    case "text":
+      if (bionicOn || beelineOn) {
+        return renderReadingText(token.content, {
+          bionic: bionicOn,
+          bionicRatio: config.reading?.bionicRatio,
+          beeline: beelineOn
+        });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: token.content });
+    case "bold":
+      return /* @__PURE__ */ jsx("strong", { "data-ncm-token": "bold", children: token.children.map((child, i) => /* @__PURE__ */ jsx(
+        TokenRenderer,
+        {
+          token: child,
+          disableBionic,
+          disableBeeline
+        },
+        i
+      )) });
+    case "italic":
+      return /* @__PURE__ */ jsx("em", { "data-ncm-token": "italic", children: token.children.map((child, i) => /* @__PURE__ */ jsx(
+        TokenRenderer,
+        {
+          token: child,
+          disableBionic,
+          disableBeeline
+        },
+        i
+      )) });
+    case "code":
+      return /* @__PURE__ */ jsx("code", { "data-ncm-token": "code", children: token.content });
+    case "link": {
+      const handleClick = (e) => {
+        config.inline?.onLinkClick?.(token.href, e);
+      };
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          "data-ncm-token": "link",
+          href: token.href,
+          title: token.title,
+          onClick: handleClick,
+          children: token.children.map((child, i) => /* @__PURE__ */ jsx(
+            TokenRenderer,
+            {
+              token: child,
+              disableBionic,
+              disableBeeline
+            },
+            i
+          ))
+        }
+      );
+    }
+    case "wiki_link": {
+      const result = config.mesh?.resolveLink(token.target) ?? {
+        status: "missing",
+        target: token.target,
+        resolved: null,
+        candidates: []
+      };
+      const href = config.inline?.resolveWikiLinkHref?.(token.target, result) ?? null;
+      const label = token.display ?? token.target;
+      if (href) {
+        const handleClick = (e) => {
+          config.inline?.onWikiLinkClick?.(token.target, result, e);
+        };
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            "data-ncm-token": "wiki_link",
+            "data-ncm-wikilink-status": result.status,
+            href,
+            onClick: handleClick,
+            children: label
+          }
+        );
+      }
+      if (config.inline?.onWikiLinkClick) {
+        const handleClick = (e) => {
+          config.inline?.onWikiLinkClick?.(token.target, result, e);
+        };
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-ncm-token": "wiki_link",
+            "data-ncm-wikilink-status": result.status,
+            onClick: handleClick,
+            children: label
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx("span", { "data-ncm-token": "wiki_link", "data-ncm-wikilink-status": result.status, children: label });
+    }
+    case "latex": {
+      const CustomRenderer = config.inline?.customLatexRenderer;
+      if (CustomRenderer) {
+        return /* @__PURE__ */ jsx(CustomRenderer, { content: token.content, display: false });
+      }
+      if (latexHtml) {
+        return /* @__PURE__ */ jsx("span", { "data-ncm-token": "latex", dangerouslySetInnerHTML: { __html: latexHtml } });
+      }
+      return /* @__PURE__ */ jsx("code", { "data-ncm-token": "latex", children: token.content });
+    }
+    case "strikethrough":
+      return /* @__PURE__ */ jsx("del", { "data-ncm-token": "strikethrough", children: token.children.map((child, i) => /* @__PURE__ */ jsx(
+        TokenRenderer,
+        {
+          token: child,
+          disableBionic,
+          disableBeeline
+        },
+        i
+      )) });
+    case "image": {
+      const src = config.inline?.resolveAssetPath?.(token.src) ?? token.src;
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          "data-ncm-token": "image",
+          src,
+          alt: token.alt,
+          title: token.title
+        }
+      );
+    }
+    case "wiki_embed": {
+      const extension = extractExtension(token.target);
+      const embedType = embedTypeFromExtension(extension);
+      const result = config.mesh?.resolveEmbed(token.target) ?? null;
+      const url = config.embeddings?.resolveUrl?.(token.target, embedType) ?? token.target;
+      if (result?.status === "missing") {
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-ncm-token": "wiki_embed",
+            "data-ncm-wikiembed-status": "missing",
+            children: `![[${token.target}]]`
+          }
+        );
+      }
+      if (result?.status === "ambiguous") {
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-ncm-token": "wiki_embed",
+            "data-ncm-wikiembed-status": "ambiguous",
+            children: `![[${token.target}]]`
+          }
+        );
+      }
+      if (embedType === "image") {
+        return /* @__PURE__ */ jsx(
+          "img",
+          {
+            "data-ncm-token": "wiki_embed",
+            "data-ncm-wikiembed-type": embedType,
+            src: url,
+            alt: token.display ?? token.target,
+            className: config.embeddings?.imageClassName
+          }
+        );
+      }
+      if (embedType === "video") {
+        return /* @__PURE__ */ jsx(
+          "video",
+          {
+            "data-ncm-token": "wiki_embed",
+            "data-ncm-wikiembed-type": embedType,
+            src: url,
+            controls: true,
+            className: config.embeddings?.videoClassName
+          }
+        );
+      }
+      if (embedType === "audio") {
+        return /* @__PURE__ */ jsx(
+          "audio",
+          {
+            "data-ncm-token": "wiki_embed",
+            "data-ncm-wikiembed-type": embedType,
+            src: url,
+            controls: true,
+            className: config.embeddings?.audioClassName
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          "data-ncm-token": "wiki_embed",
+          "data-ncm-wikiembed-type": embedType,
+          href: url,
+          children: token.display ?? token.target
+        }
+      );
+    }
+    case "inline_ref": {
+      const number = refScope?.next(token.kind) ?? 0;
+      return /* @__PURE__ */ jsx(ReferenceMarker, { kind: token.kind, number, children: token.content ? /* @__PURE__ */ jsx(InertReferenceScope, { children: /* @__PURE__ */ jsx(InlineContent, { content: token.content, disableBionic: true, disableBeeline: true }) }) : null });
+    }
+    default:
+      return null;
+  }
+}
+function renderReadingText(content, opts) {
+  if (!content) return /* @__PURE__ */ jsx(Fragment, { children: content });
+  const { bionic = false, beeline = false } = opts;
+  if (!bionic && !beeline) return /* @__PURE__ */ jsx(Fragment, { children: content });
+  const ratio = Math.min(1, Math.max(0.05, opts.bionicRatio ?? 0.5));
+  const pieces = [];
+  const regex = /[\p{L}\p{N}][\p{L}\p{N}\p{M}'’-]*/gu;
+  let match;
+  let key = 0;
+  let cursor = 0;
+  while ((match = regex.exec(content)) !== null) {
+    if (match.index > cursor) pieces.push(content.slice(cursor, match.index));
+    const segment = match[0];
+    const wrapperProps = {};
+    if (bionic) wrapperProps["data-ncm-bionic"] = "";
+    if (beeline) wrapperProps["data-ncm-beeline-word"] = "";
+    if (bionic) {
+      const headLen = Math.max(1, Math.ceil(segment.length * ratio));
+      pieces.push(
+        /* @__PURE__ */ jsxs("span", { ...wrapperProps, children: [
+          /* @__PURE__ */ jsx("span", { "data-ncm-bionic-bold": "", style: { fontWeight: 600 }, children: segment.slice(0, headLen) }),
+          segment.slice(headLen)
+        ] }, key++)
+      );
+    } else {
+      pieces.push(
+        /* @__PURE__ */ jsx("span", { ...wrapperProps, children: segment }, key++)
+      );
+    }
+    cursor = match.index + segment.length;
+  }
+  if (cursor < content.length) pieces.push(content.slice(cursor));
+  return /* @__PURE__ */ jsx(Fragment, { children: pieces });
+}
+function blockDataAttributes(block) {
+  return {
+    "data-ncm-block": block.id,
+    "data-ncm-stable": block.stableId,
+    "data-ncm-type": block.type,
+    "data-block-id": block.id
+  };
+}
+function BlockShell({
+  as = "div",
+  block,
+  children,
+  ...props
+}) {
+  return createElement(as, {
+    ...blockDataAttributes(block),
+    ...props
+  }, children);
+}
+function TaskItems({ items }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => {
+    const status = item.checked ? "Completed" : "Incomplete";
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "data-ncm-task-item": "",
+        "data-block-id": item.id,
+        "data-ncm-checked": item.checked ? "true" : "false",
+        className: "flex flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: item.checked,
+                disabled: true,
+                readOnly: true,
+                "aria-label": `${status} task`,
+                className: "size-4 shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsxs("span", { "data-ncm-task-status": "", className: "sr-only", children: [
+                status,
+                ":",
+                " "
+              ] }),
+              /* @__PURE__ */ jsx(InlineContent, { content: serializeInlineContent(item.content) })
+            ] })
+          ] }),
+          item.children ? /* @__PURE__ */ jsx("ul", { role: "list", "data-ncm-list-nested": "", className: "ml-6 list-none", children: /* @__PURE__ */ jsx(TaskItems, { items: item.children.items }) }) : null
+        ]
+      },
+      item.stableId ?? item.id
+    );
+  }) });
+}
+function TaskListBlock({ block, className }) {
+  return /* @__PURE__ */ jsx(
+    BlockShell,
+    {
+      as: "ul",
+      block,
+      role: "list",
+      "data-ncm-task-list": "",
+      className: cn("list-none space-y-1", className),
+      children: /* @__PURE__ */ jsx(TaskItems, { items: block.items })
+    }
+  );
+}
+
+export { TaskListBlock };