@aura-react-comp/x 0.0.0-stage → 0.1.0

package/esm/markdown-content/index.less

@@ -0,0 +1,124 @@
+/* MarkdownContent — AI 消息的 Markdown 排版（科技感微调） */
+
+.aura-x-markdown {
+  font-size: var(--aura-font-size-md);
+  line-height: 1.7;
+  word-break: break-word;
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: var(--aura-spacing-4) 0 var(--aura-spacing-2);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  p {
+    margin: var(--aura-spacing-2) 0;
+  }
+
+  ul,
+  ol {
+    margin: var(--aura-spacing-2) 0;
+    padding-left: var(--aura-spacing-5);
+  }
+
+  li {
+    margin: 4px 0;
+  }
+
+  /* 行内代码：品牌色点染 */
+  code {
+    padding: 2px 6px;
+    border-radius: var(--aura-radius-sm);
+    background: var(--aura-x-accent-soft);
+    color: var(--aura-x-accent);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.92em;
+  }
+
+  /* 代码块（highlightCode={false} 时的朴素形态）：暗色科技底 + 细边框 */
+  pre {
+    margin: var(--aura-spacing-3) 0;
+    padding: var(--aura-spacing-3) var(--aura-spacing-4);
+    border-radius: var(--aura-radius-md);
+    border: 1px solid var(--aura-x-bubble-border);
+    background: var(--aura-x-code-bg);
+    overflow-x: auto;
+  }
+
+  pre code {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--aura-text);
+  }
+
+  /* 围栏代码块默认交给 CodeHighlighter 渲染，这里只统一它的外边距，
+     内层留白与底色由 CodeHighlighter 自己负责，避免与上面的 pre 规则打架 */
+  .aura-x-code-highlighter {
+    margin: var(--aura-spacing-3) 0;
+  }
+
+  a {
+    color: var(--aura-x-accent);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* 引用块：渐变左边线 + 品牌浅底 */
+  blockquote {
+    margin: var(--aura-spacing-3) 0;
+    padding: var(--aura-spacing-2) var(--aura-spacing-4);
+    border-left: 3px solid var(--aura-x-accent);
+    border-radius: 0 var(--aura-radius-sm) var(--aura-radius-sm) 0;
+    background: var(--aura-x-accent-soft);
+    color: var(--aura-text-secondary);
+  }
+
+  table {
+    margin: var(--aura-spacing-3) 0;
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  th,
+  td {
+    padding: var(--aura-spacing-2) var(--aura-spacing-3);
+    border: 1px solid var(--aura-x-bubble-border);
+    text-align: left;
+  }
+
+  th {
+    font-weight: 600;
+    background: var(--aura-x-accent-soft);
+  }
+
+  hr {
+    margin: var(--aura-spacing-4) 0;
+    border: none;
+    border-top: 1px solid var(--aura-x-bubble-border);
+  }
+}
+
+/* 暗色下的局部微调 */
+[data-theme='dark'] .aura-x-markdown {
+  blockquote,
+  th {
+    background: rgba(139, 92, 246, 0.08);
+  }
+}

package/esm/mermaid/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+/**
+ * mermaid 的配置项。
+ *
+ * 刻意不 `import type { MermaidConfig } from 'mermaid'`：mermaid 是**可选** peer
+ * 依赖，若在类型层硬依赖它，未安装 mermaid 的消费方连 `import { Mermaid }`
+ * 都会因找不到类型而编译失败——可选依赖必须做到类型层面也可选。
+ */
+export type MermaidConfig = Record<string, unknown>;
+export interface MermaidActions {
+    /** 显示放大 / 缩小按钮 @default true */
+    enableZoom?: boolean;
+    /** 显示下载 SVG 按钮 @default true */
+    enableDownload?: boolean;
+    /** 显示复制源码按钮 @default true */
+    enableCopy?: boolean;
+    /** 追加自定义操作节点 */
+    customActions?: React.ReactNode;
+}
+export interface MermaidProps {
+    /** mermaid 源码 */
+    children?: string;
+    /**
+     * 头部内容：
+     * - 不传：默认头部（图片 / 代码切换 + 操作按钮）
+     * - `null`：不渲染头部
+     * - 其他节点：完全自定义（此时不再渲染内置操作按钮）
+     */
+    header?: React.ReactNode | null;
+    /**
+     * mermaid 配置。**必须是引用稳定的对象**（`useMemo` / 模块常量），
+     * 否则每次父组件重渲染都会重新初始化并重绘图表。
+     */
+    config?: MermaidConfig;
+    actions?: MermaidActions;
+    /** 渲染类型切换回调 */
+    onRenderTypeChange?: (value: 'image' | 'code') => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Mermaid — 图表。
+ *
+ * 把 mermaid 源码渲染为 SVG，并提供图片 / 代码双视图、缩放、重置、下载与复制。
+ * mermaid 通过动态 `import()` 按需加载，因此不装它也不会拖累主包体积。
+ */
+export declare const Mermaid: React.FC<MermaidProps>;

package/esm/mermaid/index.js

@@ -0,0 +1,235 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { CodeHighlighter } from "../code-highlighter";
+
+/**
+ * mermaid 的配置项。
+ *
+ * 刻意不 `import type { MermaidConfig } from 'mermaid'`：mermaid 是**可选** peer
+ * 依赖，若在类型层硬依赖它，未安装 mermaid 的消费方连 `import { Mermaid }`
+ * 都会因找不到类型而编译失败——可选依赖必须做到类型层面也可选。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SCALE_STEP = 0.2;
+const SCALE_MIN = 0.4;
+const SCALE_MAX = 3;
+
+/** 默认配置：不自动扫描页面、安全级别 strict（对图表内的 HTML / 链接做净化） */
+const DEFAULT_CONFIG = {
+  startOnLoad: false,
+  securityLevel: 'strict'
+};
+
+/** mermaid 实例 id 需为 CSS 安全字符，故不用 useId（其返回值含冒号） */
+let instanceSeq = 0;
+const nextInstanceId = () => `aura-x-mermaid-${instanceSeq++}`;
+/** 动态加载 mermaid：重依赖不进主包，未安装时才在运行到该组件时报错 */
+async function loadMermaid() {
+  try {
+    const mod = await import('mermaid');
+    return mod.default ?? mod;
+  } catch {
+    throw new Error('未安装 mermaid：请先 `pnpm add mermaid` 再使用 <Mermaid />');
+  }
+}
+
+/**
+ * Mermaid — 图表。
+ *
+ * 把 mermaid 源码渲染为 SVG，并提供图片 / 代码双视图、缩放、重置、下载与复制。
+ * mermaid 通过动态 `import()` 按需加载，因此不装它也不会拖累主包体积。
+ */
+export const Mermaid = ({
+  children,
+  header,
+  config,
+  actions,
+  onRenderTypeChange,
+  className,
+  style
+}) => {
+  const code = children ?? '';
+  const [instanceId] = useState(nextInstanceId);
+  const [view, setView] = useState('image');
+  const [status, setStatus] = useState('loading');
+  const [svg, setSvg] = useState('');
+  const [error, setError] = useState('');
+  const [scale, setScale] = useState(1);
+  const renderSeq = useRef(0);
+  const timerRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    const seq = ++renderSeq.current;
+    const isCurrent = () => !cancelled && seq === renderSeq.current;
+    setStatus('loading');
+    setError('');
+    (async () => {
+      let runtime;
+      try {
+        runtime = await loadMermaid();
+      } catch (loadError) {
+        if (!isCurrent()) return;
+        setError(loadError.message);
+        setStatus('error');
+        return;
+      }
+      try {
+        runtime.initialize({
+          ...DEFAULT_CONFIG,
+          ...config
+        });
+        const {
+          svg: output
+        } = await runtime.render(`${instanceId}-${seq}`, code);
+        if (!isCurrent()) return;
+        setSvg(output);
+        setStatus('ready');
+      } catch (renderError) {
+        if (!isCurrent()) return;
+        // 语法错误等：保留错误信息，同时把代码视图作为兜底呈现
+        setError(renderError instanceof Error ? renderError.message : String(renderError));
+        setStatus('error');
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, config, instanceId]);
+  useEffect(() => () => {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+  }, []);
+  const changeView = useCallback(next => {
+    setView(next);
+    onRenderTypeChange?.(next);
+  }, [onRenderTypeChange]);
+  const zoom = useCallback(delta => {
+    setScale(prev => Math.min(SCALE_MAX, Math.max(SCALE_MIN, Number((prev + delta).toFixed(2)))));
+  }, []);
+  const handleDownload = useCallback(() => {
+    if (!svg) return;
+    const blob = new Blob([svg], {
+      type: 'image/svg+xml;charset=utf-8'
+    });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = `${instanceId}.svg`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+  }, [svg, instanceId]);
+  const handleCopy = useCallback(async () => {
+    try {
+      if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+        throw new Error('clipboard unavailable');
+      }
+      await navigator.clipboard.writeText(code);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => setCopied(false), 1500);
+  }, [code]);
+  const showZoom = actions?.enableZoom !== false;
+  const showDownload = actions?.enableDownload !== false;
+  const showCopy = actions?.enableCopy !== false;
+  const defaultHeader = /*#__PURE__*/_jsxs("div", {
+    className: prefixCls('x-mermaid-header'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: prefixCls('x-mermaid-views'),
+      role: "group",
+      "aria-label": "\u6E32\u67D3\u89C6\u56FE\u5207\u6362",
+      children: [['image', '图片'], ['code', '代码']].map(([value, label]) => /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: classNames(prefixCls('x-mermaid-view-btn'), view === value && prefixCls('x-mermaid-view-btn--active')),
+        "aria-pressed": view === value,
+        onClick: () => changeView(value),
+        children: label
+      }, value))
+    }), /*#__PURE__*/_jsxs("div", {
+      className: prefixCls('x-mermaid-actions'),
+      children: [showZoom ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: prefixCls('x-mermaid-action'),
+          "aria-label": "\u653E\u5927",
+          disabled: scale >= SCALE_MAX,
+          onClick: () => zoom(SCALE_STEP),
+          children: "\uFF0B"
+        }), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: prefixCls('x-mermaid-action'),
+          "aria-label": "\u7F29\u5C0F",
+          disabled: scale <= SCALE_MIN,
+          onClick: () => zoom(-SCALE_STEP),
+          children: "\uFF0D"
+        }), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: prefixCls('x-mermaid-action'),
+          "aria-label": "\u91CD\u7F6E\u7F29\u653E",
+          onClick: () => setScale(1),
+          children: "\u91CD\u7F6E"
+        })]
+      }) : null, showCopy ? /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: prefixCls('x-mermaid-action'),
+        "aria-label": copied ? '已复制' : '复制源码',
+        onClick: handleCopy,
+        children: copied ? '已复制' : '复制'
+      }) : null, showDownload ? /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: prefixCls('x-mermaid-action'),
+        "aria-label": "\u4E0B\u8F7D SVG",
+        disabled: !svg,
+        onClick: handleDownload,
+        children: "\u4E0B\u8F7D"
+      }) : null, actions?.customActions]
+    })]
+  });
+  const resolvedHeader = header === null ? null : header ?? defaultHeader;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls('x-mermaid'), className),
+    style: style,
+    children: [resolvedHeader, /*#__PURE__*/_jsx("div", {
+      className: classNames(prefixCls('x-mermaid-body'), view === 'code' && prefixCls('x-mermaid-body--code')),
+      children: view === 'code' ? /*#__PURE__*/_jsx(CodeHighlighter, {
+        lang: "mermaid",
+        children: code
+      }) : status === 'error' ? /*#__PURE__*/_jsxs("div", {
+        className: prefixCls('x-mermaid-error'),
+        role: "alert",
+        children: [/*#__PURE__*/_jsx("p", {
+          className: prefixCls('x-mermaid-error-title'),
+          children: "\u56FE\u8868\u6E32\u67D3\u5931\u8D25"
+        }), /*#__PURE__*/_jsx("pre", {
+          className: prefixCls('x-mermaid-error-detail'),
+          children: error
+        })]
+      }) : status === 'loading' ? /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-mermaid-loading'),
+        "aria-busy": "true",
+        children: "\u6B63\u5728\u6E32\u67D3\u56FE\u8868\u2026"
+      }) : /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-mermaid-graph'),
+        children: /*#__PURE__*/_jsx("div", {
+          className: prefixCls('x-mermaid-canvas'),
+          style: {
+            transform: `scale(${scale})`
+          }
+          // mermaid 在本机按源码生成 SVG；安全级别已固定为 strict（净化内联
+          // HTML 与链接协议），注入面与直接用 mermaid 渲染一致。
+          ,
+          dangerouslySetInnerHTML: {
+            __html: svg
+          }
+        })
+      })
+    })]
+  });
+};
+Mermaid.displayName = 'Mermaid';

package/esm/mermaid/index.less

@@ -0,0 +1,155 @@
+/* Mermaid — 图表（头部操作栏 + 图片 / 代码双视图） */
+
+.aura-x-mermaid {
+  overflow: hidden;
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+}
+
+/* ===== 头部 ===== */
+
+.aura-x-mermaid-header {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--aura-spacing-1) var(--aura-spacing-2) var(--aura-spacing-1)
+    var(--aura-spacing-3);
+  border-bottom: 1px solid var(--aura-border);
+  background: var(--aura-x-stage-bg);
+}
+
+.aura-x-mermaid-views {
+  display: inline-flex;
+  gap: var(--aura-spacing-1);
+}
+
+.aura-x-mermaid-view-btn {
+  padding: var(--aura-spacing-1) var(--aura-spacing-2);
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  cursor: pointer;
+  transition:
+    background var(--aura-duration-fast) var(--aura-easing),
+    color var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-mermaid-view-btn--active {
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+  font-weight: 600;
+}
+
+.aura-x-mermaid-view-btn:focus-visible,
+.aura-x-mermaid-action:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-mermaid-actions {
+  display: inline-flex;
+  gap: var(--aura-spacing-1);
+  align-items: center;
+}
+
+.aura-x-mermaid-action {
+  padding: var(--aura-spacing-1) var(--aura-spacing-2);
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.5;
+  cursor: pointer;
+  transition:
+    background var(--aura-duration-fast) var(--aura-easing),
+    color var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-mermaid-action:hover:not(:disabled) {
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+}
+
+.aura-x-mermaid-action:disabled {
+  color: var(--aura-text-tertiary);
+  cursor: default;
+}
+
+/* ===== 内容区 ===== */
+
+.aura-x-mermaid-body {
+  padding: var(--aura-spacing-3);
+}
+
+/* 代码视图下把内嵌 CodeHighlighter 的外框抹平，避免双层边框 */
+.aura-x-mermaid-body--code {
+  padding: 0;
+}
+
+.aura-x-mermaid-body--code .aura-x-code-highlighter {
+  border: none;
+  border-radius: 0;
+}
+
+.aura-x-mermaid-graph {
+  overflow: auto;
+  max-height: 420px;
+  background: var(--aura-x-stage-bg);
+  border-radius: var(--aura-radius-sm);
+}
+
+.aura-x-mermaid-canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--aura-spacing-3);
+  transform-origin: center center;
+  transition: transform var(--aura-duration-normal) var(--aura-easing);
+}
+
+.aura-x-mermaid-canvas > svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.aura-x-mermaid-loading {
+  padding: var(--aura-spacing-6) 0;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-sm);
+  text-align: center;
+}
+
+.aura-x-mermaid-error {
+  padding: var(--aura-spacing-3);
+  border: 1px solid var(--aura-error);
+  border-radius: var(--aura-radius-sm);
+  background: var(--aura-error-light);
+}
+
+.aura-x-mermaid-error-title {
+  margin: 0 0 var(--aura-spacing-1);
+  color: var(--aura-error);
+  font-size: var(--aura-font-size-sm);
+  font-weight: 600;
+}
+
+.aura-x-mermaid-error-detail {
+  margin: 0;
+  overflow-x: auto;
+  color: var(--aura-text-secondary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aura-x-mermaid-canvas {
+    transition: none;
+  }
+}

package/esm/notification/index.d.ts

@@ -0,0 +1,59 @@
+/** 当前来源（origin）的浏览器通知授权状态 */
+export type XNotificationPermission = NotificationPermission;
+export interface XNotificationConfig extends NotificationOptions {
+    /** 通知标题（浏览器不提供默认值，必填） */
+    title: string;
+    /** 自动关闭延时（毫秒）；不传或非正数则不自动关闭 */
+    duration?: number;
+    /** 点击通知；第二个参数可直接关闭本条通知 */
+    onClick?: (event: Event, close: () => void) => void;
+    onClose?: (event: Event) => void;
+    onError?: (event: Event) => void;
+    onShow?: (event: Event) => void;
+}
+/**
+ * `open` 的参数：既接受扁平的 {@link XNotificationConfig}，
+ * 也接受 antdx 风格的 `{ openConfig, closeConfig }` 包装形态。
+ * `closeConfig` 用于在弹出新通知前先关掉指定 `tag` 的旧通知。
+ */
+export type XNotificationOpenArgs = XNotificationConfig | {
+    openConfig: XNotificationConfig;
+    /** 先关闭这些 tag 的通知（`undefined` 项会被忽略） */
+    closeConfig?: (string | undefined)[];
+};
+export interface XNotificationApi {
+    /** 当前授权状态；每次读取都向浏览器取实时值 */
+    readonly permission: XNotificationPermission;
+    /** 向用户请求通知权限 */
+    requestPermission: () => Promise<XNotificationPermission>;
+    /** 推送一条通知；未授权或环境不支持时静默无效果 */
+    open: (args: XNotificationOpenArgs) => void;
+    /** 关闭通知：传 tag 列表只关指定的，不传则关闭本实例发出的全部 */
+    close: (tags?: string[]) => void;
+}
+export type UseNotificationResult = [
+    {
+        permission: XNotificationPermission;
+    },
+    {
+        open: XNotificationApi['open'];
+        close: XNotificationApi['close'];
+        requestPermission: XNotificationApi['requestPermission'];
+    }
+];
+/**
+ * XNotification — 浏览器**系统通知**的命令式 API（对标 antdx 的 `notification`）。
+ *
+ * 注意这是「页面外的系统级通知」，走 `window.Notification`，受操作系统与浏览器
+ * 通知权限管控——**不是**页面内的消息条。页面内的提示请用 `@aura-react-comp/ui` 的
+ * `Notification` / `Message`。
+ */
+export declare const XNotification: XNotificationApi;
+/**
+ * useNotification — `XNotification` 的 Hook 形态。
+ *
+ * 返回 `[{ permission }, { open, close, requestPermission }]`。
+ * `permission` 首帧固定为 `'denied'`，挂载后（`useEffect` 中）再同步真实值，
+ * 以避免服务端渲染与水合结果不一致。
+ */
+export declare function useNotification(): UseNotificationResult;