klun-ui 0.1.20 → 0.1.21

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [0.1.21] — 2026-07-13
+
+### Added
+- **`Markdown` — GFM extensions.** The dependency-free renderer now understands
+  the common Markdown that documents and wikis rely on, still building React
+  nodes (never raw HTML), so it stays XSS-safe:
+  - **GFM pipe tables** with per-column alignment (`:---`, `---:`, `:--:`); cell
+    text runs through the inline renderer, so **bold** / `code` / links work
+    inside cells. Wide tables scroll inside their own container.
+  - **Task lists** — `- [ ]` / `- [x]` render read-only checkboxes.
+  - **Horizontal rules** — a line of `---`, `***`, or `___`.
+  - **Bare autolinks** — a plain `http(s)://…` URL becomes a link.
+  - **`[[wiki links]]`** via a new `wikiLink` prop (`WikiLinkResolver`): resolve
+    `[[target]]` / `[[target|label]]` to an href (and optional display label).
+    Unresolved links render as plain text, never raw `[[brackets]]`.
+
 ## [0.1.20] — 2026-07-11
 
 ### Added

package/dist/{chunk-JFRI333P.js → chunk-T3IFNMYU.js}

@@ -3499,8 +3499,21 @@ var ListItem = forwardRef(
 );
 ListItem.displayName = "ListItem";
 var k = 0;
+var wikiResolve;
 function inline(text) {
   const patterns = [
+    // [[wiki link]] / [[target|label]] — resolved via the wikiLink prop; falls
+    // back to plain text (not raw brackets) when unresolved.
+    {
+      re: /\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/,
+      node: (m) => {
+        const target = m[1].trim();
+        const r = wikiResolve?.(target);
+        const resolved = typeof r === "string" ? { href: r, label: void 0 } : r || null;
+        const label = m[2]?.trim() || resolved?.label || target;
+        return resolved ? /* @__PURE__ */ jsx("a", { className: "klun-md-wikilink", href: resolved.href, children: label }, k++) : /* @__PURE__ */ jsx("span", { className: "klun-md-wikilink klun-md-wikilink--broken", children: label }, k++);
+      }
+    },
     { re: /`([^`]+)`/, node: (m) => /* @__PURE__ */ jsx("code", { className: "klun-md-code", children: m[1] }, k++) },
     // image before link (`![alt](url)` starts with `!` + link syntax). url allows
     // http(s) and data: URIs (base64 has no `)`), so pasted screenshots embed inline.
@@ -3512,6 +3525,13 @@ function inline(text) {
     {
       re: /\[([^\]]+)\]\(([^)]+)\)/,
       node: (m) => /* @__PURE__ */ jsx("a", { href: m[2], target: "_blank", rel: "noreferrer", children: m[1] }, k++)
+    },
+    // bare autolink: a plain http(s) URL becomes a link. Runs after the
+    // [text](url)/image patterns — those start at an earlier index (the `[`/`!`)
+    // and so win via the earliest-match selection below.
+    {
+      re: /(https?:\/\/[^\s<>()[\]]+)/,
+      node: (m) => /* @__PURE__ */ jsx("a", { href: m[1], target: "_blank", rel: "noreferrer", children: m[1] }, k++)
     }
   ];
   const out = [];
@@ -3532,9 +3552,28 @@ function inline(text) {
   }
   return out;
 }
+function splitRow(line) {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|")) s = s.slice(0, -1);
+  return s.split("|").map((c) => c.trim());
+}
+function tableAligns(delimCells) {
+  return delimCells.map((c) => {
+    const l = c.startsWith(":"), r = c.endsWith(":");
+    return l && r ? "center" : r ? "right" : l ? "left" : void 0;
+  });
+}
+function isTableDelim(delim, cols) {
+  if (!delim || !delim.includes("-")) return false;
+  const cells = splitRow(delim);
+  return cells.length === cols && cells.every((c) => /^:?-{1,}:?$/.test(c));
+}
+var HR = /^\s{0,3}(-{3,}|\*{3,}|_{3,})\s*$/;
 var SPECIAL = /^(#{1,6}\s|>\s?|[-*]\s+|\d+\.\s+|```)/;
-function renderMarkdown(src) {
+function renderMarkdown(src, opts) {
   k = 0;
+  wikiResolve = opts?.wikiLink;
   const lines = src.replace(/\r\n/g, "\n").split("\n");
   const blocks = [];
   let i = 0;
@@ -3550,6 +3589,30 @@ function renderMarkdown(src) {
       );
       continue;
     }
+    if (line.includes("|")) {
+      const header = splitRow(line);
+      if (i + 1 < lines.length && isTableDelim(lines[i + 1], header.length)) {
+        const aligns = tableAligns(splitRow(lines[i + 1]));
+        i += 2;
+        const rows = [];
+        while (i < lines.length && lines[i].trim() !== "" && lines[i].includes("|")) {
+          rows.push(splitRow(lines[i++]));
+        }
+        const cellStyle = (j) => aligns[j] ? { textAlign: aligns[j] } : void 0;
+        blocks.push(
+          /* @__PURE__ */ jsx("div", { className: "klun-md-tablewrap", children: /* @__PURE__ */ jsxs("table", { className: "klun-md-table", children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: header.map((c, j) => /* @__PURE__ */ jsx("th", { style: cellStyle(j), children: inline(c) }, j)) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ jsx("tr", { children: header.map((_, j) => /* @__PURE__ */ jsx("td", { style: cellStyle(j), children: inline(r[j] ?? "") }, j)) }, ri)) })
+          ] }) }, k++)
+        );
+        continue;
+      }
+    }
+    if (HR.test(line)) {
+      blocks.push(/* @__PURE__ */ jsx("hr", { className: "klun-md-hr" }, k++));
+      i++;
+      continue;
+    }
     const h = /^(#{1,6})\s+(.*)$/.exec(line);
     if (h) {
       const tag = `h${Math.min(h[1].length + 2, 6)}`;
@@ -3568,8 +3631,18 @@ function renderMarkdown(src) {
     if (/^[-*]\s+/.test(line)) {
       const items2 = [];
       while (i < lines.length && /^[-*]\s+/.test(lines[i])) items2.push(lines[i++].replace(/^[-*]\s+/, ""));
+      const hasTask = items2.some((it) => /^\[[ xX]\]\s+/.test(it));
       blocks.push(
-        /* @__PURE__ */ jsx("ul", { className: "klun-md-ul", children: items2.map((it, j) => /* @__PURE__ */ jsx("li", { children: inline(it) }, j)) }, k++)
+        /* @__PURE__ */ jsx("ul", { className: hasTask ? "klun-md-ul klun-md-tasklist" : "klun-md-ul", children: items2.map((it, j) => {
+          const t = /^\[([ xX])\]\s+(.*)$/.exec(it);
+          if (t) {
+            return /* @__PURE__ */ jsxs("li", { className: "klun-md-task", children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", checked: t[1] !== " ", readOnly: true, disabled: true }),
+              /* @__PURE__ */ jsx("span", { children: inline(t[2]) })
+            ] }, j);
+          }
+          return /* @__PURE__ */ jsx("li", { children: inline(it) }, j);
+        }) }, k++)
       );
       continue;
     }
@@ -3587,16 +3660,16 @@ function renderMarkdown(src) {
     }
     const buf = [line];
     i++;
-    while (i < lines.length && lines[i].trim() !== "" && !SPECIAL.test(lines[i])) buf.push(lines[i++]);
+    while (i < lines.length && lines[i].trim() !== "" && !SPECIAL.test(lines[i]) && !HR.test(lines[i])) buf.push(lines[i++]);
     blocks.push(
       /* @__PURE__ */ jsx("p", { className: "klun-md-p", children: buf.flatMap((l, j) => j ? [/* @__PURE__ */ jsx("br", {}, `br${j}`), ...inline(l)] : inline(l)) }, k++)
     );
   }
   return /* @__PURE__ */ jsx(Fragment, { children: blocks });
 }
-var Markdown = forwardRef(function Markdown2({ children, source, className, ...props }, ref) {
+var Markdown = forwardRef(function Markdown2({ children, source, className, wikiLink, ...props }, ref) {
   const src = source ?? (typeof children === "string" ? children : "") ?? "";
-  return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-md", className), ...props, children: renderMarkdown(src) });
+  return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-md", className), ...props, children: renderMarkdown(src, { wikiLink }) });
 });
 Markdown.displayName = "Markdown";
 var Money = forwardRef(function Money2({
@@ -11524,5 +11597,5 @@ var Popconfirm = forwardRef(function Popconfirm2({
 Popconfirm.displayName = "Popconfirm";
 
 export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-JFRI333P.js.map
-//# sourceMappingURL=chunk-JFRI333P.js.map
+//# sourceMappingURL=chunk-T3IFNMYU.js.map
+//# sourceMappingURL=chunk-T3IFNMYU.js.map