@agentaily/design-system 0.5.0 → 0.7.0

package/DESIGN.md

@@ -93,13 +93,13 @@ Examples — ✓ "Rate limited. Retry in 18s." ✗ "Oops! Something went wrong
 | `components/feedback/` | Spinner, Toast, Tooltip, Dialog, Alert |
 | `components/overlay/` | Popover, DropdownMenu, Command, Sheet, **HoverCard, ContextMenu, Menubar, NavigationMenu, AlertDialog** |
 | `components/layout/` | **AspectRatio, ScrollArea, Resizable, Sidebar, AppShell, DesignerShell, DocsLayout, SettingsPage** — incl. full-page shells/frames |
-| `components/chat/` | Message, Composer, CodeBlock, **ConversationThread** |
+| `components/chat/` | Message, Composer, CodeBlock, **ConversationThread, Markdown** |
 | `components/ai/` | Reasoning, ToolCall, Sources + Citation, Suggestion/Suggestions, ModelSelector, Attachments, Shimmer, **Conversation, Task, Plan, Context, Confirmation, Checkpoint, Queue** |
 | `components/code/` | **Terminal, FileTree, Snippet, StackTrace, TestResults, Artifact, WebPreview, Agent, Commit, EnvironmentVariables, PackageInfo, Sandbox, SchemaDisplay, JSXPreview** |
 | `components/voice/` | **AudioPlayer, MicSelector, VoiceSelector, SpeechInput, Transcription, Persona** |
 | `components/workflow/` | **Flow (Canvas), Canvas, Node, Edge, Connection, Controls, Panel, Toolbar** |
 | `components/utilities/` | **Image, OpenInChat, Icon (unified Lucide set), BrandMark, RotatingTagline** |
-| `components/settings/` | **TestRow, HelpSteps, IntegrationSettings** — connection-card primitives + the DeepSeek/Feishu integration modal |
+| `components/settings/` | **TestRow, HelpSteps, DeepSeekCard, FeishuCard** — connection-card primitives + two pure-display service cards (state belongs to the caller) |
 | `components/auth/` | **AuthDialog (+ AuthDialog.useAuth), AccountControl, SignInPage** — sign-in/register modal + persisted session + top-bar account menu + full-page sign-in |
 | `components/review/` | **MarkupLayer** — point-at-an-element review overlay (`data-mk-label`) |
 | **Hooks** (headless) | `Queue.useQueue`, `AuthDialog.useAuth`, `Form.useForm` / `Form.useFieldArray` — logic without UI, exposed as statics on the paired component |
@@ -108,7 +108,7 @@ Examples — ✓ "Rate limited. Retry in 18s." ✗ "Oops! Something went wrong
 | `ui_kits/docs/` | Documentation site (interactive) |
 | `SKILL.md` | Agent-skill entry point |
 
-Every component ships `<Name>.jsx` + `<Name>.d.ts` (props) + `<Name>.prompt.md` (usage) — **146 component exports** across the primitive categories (buttons, inputs, display, feedback, overlay, layout, chat, ai, code, voice, workflow, utilities) plus product-domain layers (**settings, auth, review**). Full-page frames — `AppShell` / `DesignerShell` / `DocsLayout` / `SettingsPage` (layout), `ConversationThread` (chat), `SignInPage` (auth) — are **live components, not copy-templates**: change one, every consuming project benefits on re-sync. Consume via the compiled bundle: `window.AxiomDesignSystem_7fc962`. Read each component's `.prompt.md` for copy-paste usage.
+Every component ships `<Name>.jsx` + `<Name>.d.ts` (props) + `<Name>.prompt.md` (usage) — **148 component exports** across the primitive categories (buttons, inputs, display, feedback, overlay, layout, chat, ai, code, voice, workflow, utilities) plus product-domain layers (**settings, auth, review**). Full-page frames — `AppShell` / `DesignerShell` / `DocsLayout` / `SettingsPage` (layout), `ConversationThread` (chat), `SignInPage` (auth) — are **live components, not copy-templates**: change one, every consuming project benefits on re-sync. Consume via the compiled bundle: `window.AxiomDesignSystem_7fc962`. Read each component's `.prompt.md` for copy-paste usage.
 
 **Forms are layered, not monolithic.** Presentational controls (Input/Select/Field…) own layout and never depend on a form engine. `Form` + `FormActions` add pure structure. `Form.useForm` is an **optional**, zero-dependency orchestration hook (values/errors/touched/validate/submit) exposed off the capitalized `Form` export — drop it for react-hook-form or TanStack and the controls still work. Errors surface only after blur or submit; spread `form.field(name)` onto any value control, or `form.field(name, {type:"checkbox"})` for boolean ones.
 
@@ -123,13 +123,13 @@ The system sits on **two orthogonal axes**. Don't conflate them: a *domain* is n
 | **L0 Tokens** | colour / type / space / radius / shadow / motion variables | — | `tokens/*.css` |
 | **L1 Primitives** (atoms) | no business meaning, usable anywhere | tokens | `Button`, `Input`, `Badge`, `Icon`, `BrandMark`, `RotatingTagline` |
 | **L2 Composites** (molecules) | a few primitives combined; still cross-product | L1 | `Composer`, `SecretField`, `StatusPill` |
-| **L3 Patterns** (organisms) | self-contained interaction + state, configurable | L1–L2 | `AuthDialog`, `IntegrationSettings`, `MarkupLayer`, `ConversationThread` |
+| **L3 Patterns** (organisms) | self-contained interaction + state, configurable | L1–L2 | `AuthDialog`, `MarkupLayer`, `ConversationThread`, `DeepSeekCard` / `FeishuCard` (display-only — caller owns state) |
 | **L4 Page shells / frames** | full-page layout with slots | L1–L3 | `AppShell`, `DesignerShell`, `DocsLayout`, `SettingsPage`, `SignInPage` |
 | **L5 Product code** | real content + business logic — **never lives in the DS** | L4 | each app's flow / preview renderer |
 
 ### ② 横向 — domains (categorization *inside* a layer, not a level)
 
-`buttons · inputs · display · feedback · overlay · layout · chat · ai · code · voice · workflow · utilities · settings · auth · review`. A product-domain component (e.g. `IntegrationSettings`) lives at its **abstraction layer** (L3) and is merely *filed* under its **domain folder** (`settings/`). Domains are folders, not tiers.
+`buttons · inputs · display · feedback · overlay · layout · chat · ai · code · voice · workflow · utilities · settings · auth · review`. A product-domain component (e.g. `FeishuCard`) lives at its **abstraction layer** and is merely *filed* under its **domain folder** (`settings/`). Domains are folders, not tiers.
 
 **Where does a component go?** Ask: (1) what does it depend on? — composites + own state → higher. (2) reused by ≥2 surfaces? — if not, keep it in the app, not the DS. (3) how much business meaning? — more → higher layer, more generic → lower.
 

package/README.md

@@ -1,6 +1,6 @@
 # agentaily design system
 
-Agentaily(AI chatbot)设计系统:113 个 React 组件 + Storybook,单色亮色优先(暗色可切)。品牌一句话:**极客风格,简约,大气,科技感**。
+Agentaily(AI chatbot)设计系统:115 个 React 组件 + Storybook,单色亮色优先(暗色可切)。品牌一句话:**极客风格,简约,大气,科技感**。
 
 📖 **在线 Storybook:** https://agentaily.github.io/design-system/
 
@@ -28,7 +28,7 @@ npm run build:lib   # 产出 dist/:每组件一个 .js + index.d.ts + styles.css
 
 | 路径                                            | 内容                                      |
 | ----------------------------------------------- | ----------------------------------------- |
-| `dist/index.js`                                 | ESM 入口,re-export 全部 113 个组件符号    |
+| `dist/index.js`                                 | ESM 入口,re-export 全部 115 个组件符号    |
 | `dist/components/**/*.js`                       | 每个组件独立模块(含运行时 CSS 注入)       |
 | `dist/index.d.ts` + `dist/components/**/*.d.ts` | TypeScript 类型契约                       |
 | `dist/styles.css`                               | 内联好的 tokens + 字体,消费方 import 一次 |

package/dist/components/auth/SignInPage.d.ts

@@ -39,7 +39,7 @@ export interface SignInPageProps {
   defaultMode?: "signin" | "signup";
   /** Fires when the footer link flips mode — wire to your router (/signin ↔ /signup). */
   onModeChange?: (mode: "signin" | "signup") => void;
-  /** Brand-panel lockup. @default <BrandMark wordmark /> (blinking cursor) */
+  /** Brand-panel lockup. @default <BrandMark wordmark /> (no cursor) */
   brand?: React.ReactNode;
   /**
    * All user-facing strings, deep-merged over the English defaults. Per-mode

package/dist/components/chat/Markdown.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Renders a model's markdown STRING into typeset, theme-aware React nodes.
+ *
+ * Composable primitive for any surface that shows model output. `<Message>`
+ * uses it internally to render assistant prose, but it stands alone too.
+ *
+ * Coverage: paragraphs + soft line breaks, **bold**, *italic*, ~~strikethrough~~,
+ * `inline code`, fenced ```code blocks``` (rendered via <CodeBlock>), unordered +
+ * ordered + nested (mixed) lists, GitHub task lists (- [ ] / - [x]), blockquotes
+ * (nested), GFM tables with per-column alignment (overflow scrolls), horizontal
+ * rules (--- / *** / ___), #/##/### headings, [links](url), and bare-URL autolinks.
+ * Images ![alt](url) render as an inert placeholder chip — never fetched.
+ *
+ * Safety: the string is parsed to a node tree and emitted as React elements
+ * only — never dangerouslySetInnerHTML — so all literal text is auto-escaped
+ * and there is no HTML-injection surface. Link hrefs are scheme-sanitized
+ * (javascript:/data:/vbscript: are dropped); images are not loaded.
+ *
+ * Streaming: unterminated inline delimiters (** ` _ ~~ [..]( ) degrade to literal
+ * text; a half table, a half blockquote, and an unclosed ``` fence render their
+ * partial content, so a half-streamed token never throws or vanishes mid-stream.
+ */
+export interface MarkdownProps {
+  /** The markdown source string. Takes precedence over a string `children`. */
+  content?: string;
+  /** Alternative to `content`: a markdown string passed as children. */
+  children?: string;
+  className?: string;
+}
+export declare function Markdown(props: MarkdownProps): JSX.Element;

package/dist/components/chat/Markdown.js

@@ -0,0 +1,502 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { CodeBlock } from "./CodeBlock.js";
+const AX_MD_CSS = `
+.ax-md { font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-body); min-width: 0; }
+.ax-md > :first-child { margin-top: 0; }
+.ax-md > :last-child { margin-bottom: 0; }
+
+.ax-md__p { margin: 0 0 0.7em; text-wrap: pretty; }
+
+.ax-md__ul, .ax-md__ol { margin: 0 0 0.7em; padding-left: 1.5em; }
+.ax-md__li { margin: 0.2em 0; }
+.ax-md__li > .ax-md__ul, .ax-md__li > .ax-md__ol { margin: 0.25em 0 0; padding-left: 1.3em; }
+
+.ax-md__ul { list-style: none; padding-left: 1.35em; }
+.ax-md__ul > .ax-md__li { position: relative; }
+.ax-md__ul > .ax-md__li::before {
+  content: ""; position: absolute; left: -1.05em; top: 0.62em;
+  width: 4px; height: 4px; background: var(--text-faint);
+}
+
+.ax-md__ol { list-style: decimal; padding-left: 1.7em; }
+.ax-md__ol > .ax-md__li::marker {
+  font-family: var(--font-mono); font-size: 0.9em; color: var(--text-faint);
+}
+
+.ax-md__li--task { list-style: none; display: flex; align-items: flex-start; gap: 8px; }
+.ax-md__ul > .ax-md__li--task::before { display: none; }
+.ax-md__check {
+  appearance: none; -webkit-appearance: none; margin: 3px 0 0; flex: none;
+  width: 15px; height: 15px; border: 1px solid var(--border-strong);
+  border-radius: var(--radius-1); background: var(--bg-0); position: relative; cursor: default;
+}
+.ax-md__check:checked { background: var(--accent); border-color: var(--accent); }
+.ax-md__check:checked::after {
+  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
+  border: solid var(--accent-fg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
+}
+.ax-md__li--task > .ax-md__taskbody { flex: 1; min-width: 0; }
+
+.ax-md__strong { font-weight: var(--weight-bold); color: var(--text-body); }
+.ax-md__em { font-style: italic; }
+.ax-md__del { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text-muted); }
+
+.ax-md__code {
+  font-family: var(--font-mono); font-size: 0.86em;
+  background: var(--bg-3); color: var(--text-body);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-1); padding: 0.12em 0.36em;
+  white-space: break-spaces; word-break: break-word;
+}
+[data-theme="dark"] .ax-md__code { background: var(--bg-2); }
+
+.ax-md > .ax-code, .ax-md__li > .ax-code, .ax-md__quote > .ax-code { margin: 0 0 0.7em; }
+
+.ax-md__link {
+  color: var(--text-body); text-decoration: underline;
+  text-underline-offset: 2px; text-decoration-color: var(--border-strong);
+  transition: text-decoration-color var(--dur-1) var(--ease-out);
+  word-break: break-word;
+}
+.ax-md__link:hover { text-decoration-color: var(--text-body); }
+
+.ax-md__img {
+  display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline;
+  padding: 1px 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-1);
+  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
+}
+.ax-md__img b { font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); }
+
+.ax-md__quote {
+  margin: 0 0 0.7em; padding: 2px 0 2px 14px;
+  border-left: 2px solid var(--border-strong); color: var(--text-muted);
+}
+.ax-md__quote > :last-child { margin-bottom: 0; }
+.ax-md__quote .ax-md__quote { margin-top: 0.5em; }
+
+.ax-md__hr { border: none; border-top: 1px solid var(--border-default); margin: 1.2em 0; }
+
+.ax-md__tablewrap {
+  margin: 0 0 0.7em; overflow-x: auto;
+  border: 1px solid var(--border-default); border-radius: var(--radius-2);
+}
+.ax-md__table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
+.ax-md__table th, .ax-md__table td {
+  padding: 7px 12px; text-align: left; vertical-align: top;
+  border-bottom: 1px solid var(--border-default); border-right: 1px solid var(--border-default);
+}
+.ax-md__table th:last-child, .ax-md__table td:last-child { border-right: none; }
+.ax-md__table tbody tr:last-child td { border-bottom: none; }
+.ax-md__table thead th {
+  background: var(--surface-card); color: var(--text-body);
+  font-weight: var(--weight-medium); white-space: nowrap;
+}
+
+.ax-md__h { font-family: var(--font-display); font-weight: var(--weight-medium);
+  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
+  margin: 1.1em 0 0.5em; color: var(--text-body); }
+.ax-md__h--1 { font-size: var(--text-xl); }
+.ax-md__h--2 { font-size: var(--text-lg); }
+.ax-md__h--3 { font-size: var(--text-md); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-md-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-md-css";
+  s.textContent = AX_MD_CSS;
+  document.head.appendChild(s);
+}
+function sanitizeUrl(raw) {
+  const url = String(raw || "").replace(/[\u0000-\u001F\u007F]/g, "").trim();
+  if (!url) return null;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(url)) {
+    if (/^(https?|mailto|tel):/i.test(url)) return url;
+    return null;
+  }
+  return url;
+}
+function parseInline(text, keyBase) {
+  const out = [];
+  let buf = "";
+  let i = 0;
+  let k = 0;
+  const len = text.length;
+  const flush = () => {
+    if (buf) {
+      out.push(buf);
+      buf = "";
+    }
+  };
+  while (i < len) {
+    const ch = text[i];
+    const rest = text.slice(i);
+    if (ch === "\n") {
+      flush();
+      out.push(/* @__PURE__ */ jsx("br", {}, keyBase + "-br" + k++));
+      i++;
+      continue;
+    }
+    if (ch === "\\" && i + 1 < len && /[\\`*_{}\[\]()#+\-.!~|>]/.test(text[i + 1])) {
+      buf += text[i + 1];
+      i += 2;
+      continue;
+    }
+    let m;
+    if (ch === "`" && (m = /^`([^`\n]+?)`/.exec(rest))) {
+      flush();
+      out.push(
+        /* @__PURE__ */ jsx("code", { className: "ax-md__code", children: m[1] }, keyBase + "-c" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    if (ch === "!" && text[i + 1] === "[" && (m = /^!\[([^\]]*)\]\(([^)\s]*)\)/.exec(rest))) {
+      flush();
+      out.push(
+        /* @__PURE__ */ jsxs("span", { className: "ax-md__img", title: m[2], children: [
+          /* @__PURE__ */ jsx("b", { children: "IMG" }),
+          m[1] ? " · " + m[1] : ""
+        ] }, keyBase + "-img" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    if (ch === "[" && (m = /^\[([^\]]*)\]\(([^)\s]*)\)/.exec(rest))) {
+      flush();
+      const href = sanitizeUrl(m[2]);
+      const inner = parseInline(m[1], keyBase + "-lt" + k);
+      out.push(
+        href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "ax-md__link",
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer nofollow",
+            children: inner
+          },
+          keyBase + "-l" + k++
+        ) : /* @__PURE__ */ jsx("span", { children: inner }, keyBase + "-l" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    if ((ch === "h" || ch === "w") && (i === 0 || /[\s(]/.test(text[i - 1])) && (m = /^((?:https?:\/\/|www\.)[^\s<>]+)/i.exec(rest))) {
+      let urlText = m[1];
+      const trail = /[.,;:!?'")\]]+$/.exec(urlText);
+      if (trail) urlText = urlText.slice(0, urlText.length - trail[0].length);
+      const href = sanitizeUrl(/^www\./i.test(urlText) ? "http://" + urlText : urlText);
+      if (href) {
+        flush();
+        out.push(
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: "ax-md__link",
+              href,
+              target: "_blank",
+              rel: "noopener noreferrer nofollow",
+              children: urlText
+            },
+            keyBase + "-a" + k++
+          )
+        );
+        i += urlText.length;
+        continue;
+      }
+    }
+    if (ch === "*" && (m = /^\*\*([\s\S]+?)\*\*/.exec(rest))) {
+      flush();
+      out.push(
+        /* @__PURE__ */ jsx("strong", { className: "ax-md__strong", children: parseInline(m[1], keyBase + "-bt" + k) }, keyBase + "-b" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    if (ch === "_" && (m = /^__([\s\S]+?)__/.exec(rest))) {
+      flush();
+      out.push(
+        /* @__PURE__ */ jsx("strong", { className: "ax-md__strong", children: parseInline(m[1], keyBase + "-bt" + k) }, keyBase + "-b" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    if (ch === "~" && (m = /^~~([\s\S]+?)~~/.exec(rest))) {
+      flush();
+      out.push(
+        /* @__PURE__ */ jsx("del", { className: "ax-md__del", children: parseInline(m[1], keyBase + "-st" + k) }, keyBase + "-s" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    if (ch === "*" && (m = new RegExp("^\\*(?!\\s)([^*]+?)(?<!\\s)\\*").exec(rest))) {
+      flush();
+      out.push(
+        /* @__PURE__ */ jsx("em", { className: "ax-md__em", children: parseInline(m[1], keyBase + "-it" + k) }, keyBase + "-i" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    if (ch === "_" && (m = new RegExp("^_(?!\\s)([^_]+?)(?<!\\s)_").exec(rest))) {
+      flush();
+      out.push(
+        /* @__PURE__ */ jsx("em", { className: "ax-md__em", children: parseInline(m[1], keyBase + "-it" + k) }, keyBase + "-i" + k++)
+      );
+      i += m[0].length;
+      continue;
+    }
+    buf += ch;
+    i++;
+  }
+  flush();
+  return out;
+}
+const RE_FENCE = /^(\s{0,3})(`{3,}|~{3,})\s*([\w+#.-]*)\s*$/;
+const RE_HEADING = /^(#{1,6})\s+(.*)$/;
+const RE_HR = /^\s{0,3}([-*_])(?:\s*\1){2,}\s*$/;
+const RE_BLANK = /^\s*$/;
+const RE_QUOTE = /^\s*>/;
+const RE_LIST_ITEM = /^([ \t]*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+function leadingSpaces(s) {
+  const m = /^[ \t]*/.exec(s);
+  return m[0].length;
+}
+function listMarkerInfo(line) {
+  const m = RE_LIST_ITEM.exec(line);
+  if (!m) return null;
+  const ordered = /\d/.test(m[2]);
+  return {
+    indent: m[1].length,
+    bullet: ordered ? "ol" : "ul",
+    start: ordered ? parseInt(m[2], 10) : null,
+    text: m[3],
+    raw: m[0]
+  };
+}
+function splitTableRow(row) {
+  let s = row.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|")) s = s.slice(0, -1);
+  return s.split(new RegExp("(?<!\\\\)\\|")).map((c) => c.trim().replace(/\\\|/g, "|"));
+}
+function isTableSep(line) {
+  if (!line.includes("|")) return false;
+  const cells = splitTableRow(line);
+  return cells.length > 0 && cells.every((c) => /^:?-{1,}:?$/.test(c.trim()));
+}
+function alignOf(cell) {
+  const c = cell.trim();
+  const l = c.startsWith(":"), r = c.endsWith(":");
+  if (l && r) return "center";
+  if (r) return "right";
+  if (l) return "left";
+  return null;
+}
+function startsBlock(lines, i) {
+  const line = lines[i];
+  if (RE_FENCE.test(line)) return true;
+  if (RE_HR.test(line)) return true;
+  if (RE_HEADING.test(line)) return true;
+  if (RE_QUOTE.test(line)) return true;
+  if (listMarkerInfo(line)) return true;
+  if (line.includes("|") && i + 1 < lines.length && isTableSep(lines[i + 1])) return true;
+  return false;
+}
+function parseList(lines, i) {
+  const base = leadingSpaces(lines[i]);
+  const baseInfo = listMarkerInfo(lines[i]);
+  const type = baseInfo.bullet;
+  const start = baseInfo.start;
+  const items = [];
+  while (i < lines.length) {
+    if (RE_BLANK.test(lines[i])) {
+      let j = i;
+      while (j < lines.length && RE_BLANK.test(lines[j])) j++;
+      const info2 = j < lines.length ? listMarkerInfo(lines[j]) : null;
+      if (j < lines.length && (info2 && leadingSpaces(lines[j]) === base || leadingSpaces(lines[j]) > base)) {
+        i = j;
+        continue;
+      }
+      break;
+    }
+    const ind = leadingSpaces(lines[i]);
+    const info = listMarkerInfo(lines[i]);
+    if (info && ind === base && info.bullet === type) {
+      const markerWidth = info.raw.length - info.text.length;
+      const itemLines = [info.text];
+      i++;
+      while (i < lines.length) {
+        if (RE_BLANK.test(lines[i])) {
+          let j = i;
+          while (j < lines.length && RE_BLANK.test(lines[j])) j++;
+          if (j < lines.length && leadingSpaces(lines[j]) > base) {
+            itemLines.push("");
+            i++;
+            continue;
+          }
+          break;
+        }
+        if (leadingSpaces(lines[i]) > base) {
+          itemLines.push(lines[i].slice(Math.min(markerWidth, leadingSpaces(lines[i]))));
+          i++;
+        } else break;
+      }
+      while (itemLines.length && itemLines[itemLines.length - 1] === "") itemLines.pop();
+      let checked = null;
+      const tm = /^\[([ xX])\]\s+([\s\S]*)$/.exec(itemLines[0] || "");
+      if (tm) {
+        checked = tm[1].toLowerCase() === "x";
+        itemLines[0] = tm[2];
+      }
+      items.push({ checked, blocks: parseBlocks(itemLines.join("\n")) });
+    } else {
+      break;
+    }
+  }
+  return { type, start, items, next: i };
+}
+function parseBlocks(src) {
+  const lines = String(src || "").replace(/\r\n?/g, "\n").split("\n");
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = RE_FENCE.exec(line);
+    if (fence) {
+      const mark = fence[2][0];
+      const len = fence[2].length;
+      const close = new RegExp("^\\s{0,3}" + mark + "{" + len + ",}\\s*$");
+      i++;
+      const code = [];
+      while (i < lines.length && !close.test(lines[i])) {
+        code.push(lines[i]);
+        i++;
+      }
+      if (i < lines.length) i++;
+      blocks.push({ type: "code", lang: fence[3] || "", code: code.join("\n") });
+      continue;
+    }
+    if (RE_BLANK.test(line)) {
+      i++;
+      continue;
+    }
+    if (RE_HR.test(line)) {
+      blocks.push({ type: "hr" });
+      i++;
+      continue;
+    }
+    const h = RE_HEADING.exec(line);
+    if (h) {
+      blocks.push({ type: "heading", level: h[1].length, text: h[2] });
+      i++;
+      continue;
+    }
+    if (RE_QUOTE.test(line)) {
+      const inner = [];
+      while (i < lines.length && RE_QUOTE.test(lines[i])) {
+        inner.push(lines[i].replace(/^\s*>\s?/, ""));
+        i++;
+      }
+      blocks.push({ type: "quote", blocks: parseBlocks(inner.join("\n")) });
+      continue;
+    }
+    if (line.includes("|") && i + 1 < lines.length && isTableSep(lines[i + 1])) {
+      const header = splitTableRow(line);
+      const aligns = splitTableRow(lines[i + 1]).map(alignOf);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && !RE_BLANK.test(lines[i]) && lines[i].includes("|") && !RE_FENCE.test(lines[i]) && !RE_QUOTE.test(lines[i])) {
+        rows.push(splitTableRow(lines[i]));
+        i++;
+      }
+      blocks.push({ type: "table", header, aligns, rows });
+      continue;
+    }
+    if (listMarkerInfo(line)) {
+      const res = parseList(lines, i);
+      blocks.push({ type: "list", listType: res.type, start: res.start, items: res.items });
+      i = res.next;
+      continue;
+    }
+    const para = [line];
+    i++;
+    while (i < lines.length && !RE_BLANK.test(lines[i]) && !startsBlock(lines, i)) {
+      para.push(lines[i]);
+      i++;
+    }
+    blocks.push({ type: "p", text: para.join("\n") });
+  }
+  return blocks;
+}
+function renderItemContent(blocks, key) {
+  if (blocks.length === 1 && blocks[0].type === "p") return parseInline(blocks[0].text, key);
+  return blocks.map(
+    (b, j) => b.type === "p" ? /* @__PURE__ */ jsx(React.Fragment, { children: parseInline(b.text, key + "-" + j) }, j) : renderBlock(b, key + "-" + j)
+  );
+}
+function renderList(b, key) {
+  const Tag = b.listType === "ol" ? "ol" : "ul";
+  const cls = b.listType === "ol" ? "ax-md__ol" : "ax-md__ul";
+  const startAttr = b.listType === "ol" && b.start && b.start !== 1 ? b.start : void 0;
+  return /* @__PURE__ */ jsx(Tag, { className: cls, start: startAttr, children: b.items.map((it, j) => {
+    const content = renderItemContent(it.blocks, key + "-" + j);
+    if (it.checked !== null) {
+      return /* @__PURE__ */ jsxs("li", { className: "ax-md__li ax-md__li--task", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: "ax-md__check",
+            checked: it.checked,
+            disabled: true,
+            readOnly: true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ax-md__taskbody", children: content })
+      ] }, j);
+    }
+    return /* @__PURE__ */ jsx("li", { className: "ax-md__li", children: content }, j);
+  }) }, key);
+}
+function renderTable(b, key) {
+  const cols = b.header.length;
+  return /* @__PURE__ */ jsx("div", { className: "ax-md__tablewrap", children: /* @__PURE__ */ jsxs("table", { className: "ax-md__table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: b.header.map((c, ci) => /* @__PURE__ */ jsx("th", { style: { textAlign: b.aligns[ci] || "left" }, children: parseInline(c, key + "-h" + ci) }, ci)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: b.rows.map((r, ri) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: cols }).map((_, ci) => /* @__PURE__ */ jsx("td", { style: { textAlign: b.aligns[ci] || "left" }, children: parseInline(r[ci] || "", key + "-r" + ri + "c" + ci) }, ci)) }, ri)) })
+  ] }) }, key);
+}
+function renderBlock(b, key) {
+  switch (b.type) {
+    case "code":
+      return /* @__PURE__ */ jsx(CodeBlock, { code: b.code, lang: b.lang || "text" }, key);
+    case "hr":
+      return /* @__PURE__ */ jsx("hr", { className: "ax-md__hr" }, key);
+    case "quote":
+      return /* @__PURE__ */ jsx("blockquote", { className: "ax-md__quote", children: renderBlocks(b.blocks, key) }, key);
+    case "table":
+      return renderTable(b, key);
+    case "list":
+      return renderList(b, key);
+    case "heading": {
+      const lvl = Math.min(b.level, 3);
+      const Tag = "h" + Math.min(b.level + 1, 6);
+      return /* @__PURE__ */ jsx(Tag, { className: "ax-md__h ax-md__h--" + lvl, children: parseInline(b.text, key) }, key);
+    }
+    case "p":
+    default:
+      return /* @__PURE__ */ jsx("p", { className: "ax-md__p", children: parseInline(b.text, key) }, key);
+  }
+}
+function renderBlocks(blocks, keyBase) {
+  return blocks.map((b, idx) => renderBlock(b, keyBase + "-blk" + idx));
+}
+function Markdown({ content, children, className = "", ...rest }) {
+  const src = typeof content === "string" ? content : typeof children === "string" ? children : "";
+  const blocks = React.useMemo(() => parseBlocks(src), [src]);
+  const cls = ["ax-md", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: cls, ...rest, children: renderBlocks(blocks, "md") });
+}
+export {
+  Markdown
+};
+//# sourceMappingURL=Markdown.js.map