wendang-react 0.6.2 → 0.6.4

package/dist/styles/tokens.css

@@ -1,142 +1 @@
-@import './content-tokens.css';
-
-.wendang {
-  --color-bg: #f6f8fc; --color-surface: #fff; --color-surface-subtle: #f5f7fa;
-  --color-text: #1f2937; --color-text-muted: #667085; --color-text-faint: #7c8798;
-  --color-border: #dce2eb; --color-border-strong: #b9c3d2;
-  --color-accent: var(--wendang-accent, #2f6feb); --color-accent-soft: #eaf1ff;
-  --color-danger: #cf3d48; --color-success: #21814b; --color-warning: #ad6b12;
-  /*
-   * 行内评论标记色：**同一黄色系的三档**，不引入第二种色相。
-   *
-   * 早先"有回复"的评论用蓝色区分，用户反馈蓝色与黄色差别太大、容易误读成
-   * 两类不同的东西（"可以搞多色，但是不要影响用户心智"）。现在三档都在黄色
-   * 家族里，靠**深浅**表达强弱：
-   *   - 普通评论：亮黄底 + 深琥珀下划线；
-   *   - 有回复：底色加深一档（表示这里更"热"）；
-   *   - 当前激活：再深一档。
-   * 下划线取深琥珀（#d48806）而不是亮黄：底色变亮后，浅色下划线在浅蓝/白
-   * 背景上都看不清（用户反馈"这个看不清，底部和背景色"）。
-   */
-  --comment-mark-bg: #ffe58f; --comment-mark-line: #d48806;
-  --comment-mark-bg-reply: #ffd66688; --comment-mark-line-reply: #ff9900;
-  --comment-mark-bg-active: #ffc53d; --comment-mark-line-active: #ad6800;
-  --content-width: 100%; --shadow-pop: 0 10px 32px #14284a20;
-  /*
-   * 内容排版 token（表格、标题、间距、媒体）。
-   *
-   * 这些变量原先只存在于 YWiki 的 web/src/styles/global.css，抽成 SDK 时
-   * 消费方（shared/content-style.css）留下了、定义方漏掉了。CSS 变量取到
-   * 无效值会让整条声明在计算值阶段失效，于是表格边框变成 none、表头背景
-   * 变透明、段落与标题的间距塌成 0。颜色用绝对值，间距跟随 --content-font-size。
-   */
-  --content-scroll-offset: 80px;
-  /**
-   * 块间距（段落之间）。
-   *
-   * 从 `3/7`（16px 字号下 6.86px）调到 `5/7`（11.43px）。原因有两个：
-   *  1. 6.86px 对中文正文偏紧，段与段之间读起来粘连（用户反馈"行间距处理下"）；
-   *  2. 块选中时会沿块上下各外扩一段做高亮带，而外扩必须给相邻块之间保留
-   *     可见的白缝——间距太小时这段预算不够，两个块的底色会糊成一整块
-   *     （用户实测："带了选中背景后上下间距没了"）。
-   */
-  --color-code-bg: #f1f5fa;
-  color: var(--color-text); background: var(--color-surface);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
-  min-width: 0; min-height: 0;
-}
-.wendang[data-wendang-theme="dark"] {
-  --color-bg: #17191e; --color-surface: #202329; --color-surface-subtle: #292d35;
-  --color-text: #e5e9f0; --color-text-muted: #b2bdcd; --color-text-faint: #8f9cb0;
-  --color-border: #3b4350; --color-border-strong: #606c7e; --color-accent-soft: #243653;
-  --content-text-color: #e8e8ec;
-  --content-heading-color: #f0f0f3;
-  --content-table-header-bg: #2a2e38;
-  --content-table-grid-color: #424753;
-  --color-code-bg: #20242c;
-  /* 深色底上用低明度琥珀底 + 高明度下划线，保持同一黄色系的三档深浅 */
-  --comment-mark-bg: #4a3a12; --comment-mark-line: #e8b923;
-  --comment-mark-bg-reply: #5c4813; --comment-mark-line-reply: #ffc53d;
-  --comment-mark-bg-active: #6b5416; --comment-mark-line-active: #ffc53d;
-}
-.wendang-root { min-height: 0; min-width: 0; height: 100%; }
-/**
- * 浮层挂载根。必须建层叠上下文：正文 `.tiptap` 自己是 `position: relative`，
- * 若 portal 没有 z-index，它会被正文里的图片等元素盖住——实测拖拽插入线
- * 就因此完全看不见（mouse 命中的是图片）。
- */
-.wendang-portal {
-  position: relative;
-  z-index: 1000;
-}
-/*
- * 基础元素样式同时作用于 `.wendang` 正文与 `.wendang-popup-scope` 弹层内容。
- *
- * 弹层（对话框、右键菜单）teleport 到 body 后不在 `.wendang` 内，只带了一份
- * token 副本；如果这些规则只写在 `.wendang` 下，弹层里的 input 会退回浏览器
- * 默认样式、`.muted`/`.small`/`.error-banner` 全部失效。用 `:is()` 让两处共用
- * 同一组声明，避免再复制一遍。
- */
-/* Inline topic editors own their font metrics and appearance in both canvas hosts. */
-:is(.wendang, .wendang-popup-scope) :where(button, input, textarea):not(:where(.mind-topic-input)) { font: inherit; box-sizing: border-box; }
-:is(.wendang, .wendang-popup-scope) :where(a) { color: var(--color-accent); }
-:is(.wendang, .wendang-popup-scope) :where(button) { cursor: pointer; }
-:is(.wendang, .wendang-popup-scope) .muted { color: var(--color-text-muted); }
-:is(.wendang, .wendang-popup-scope) .small { font-size: 12px; }
-:is(.wendang, .wendang-popup-scope) :where(input:not([type=checkbox]):not([type=radio]), textarea):not(.worksheet-grid *):not(:where(.mind-topic-input)) {
-  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
-  border-radius: 6px; padding: 6px 8px;
-}
-:is(.wendang, .wendang-popup-scope) :where(.error-banner, .error) { color: var(--color-danger); }
-:is(.wendang, .wendang-popup-scope) :where(.notice) { color: var(--color-text-muted); }
-
-/* 文档调色板：与存储值分开，切换主题不会改写正文或触发保存。 */
-.wendang {
-  --doc-text-gray: #646a73;
-  --doc-text-red: #d92c2c;
-  --doc-text-orange: #b95d0b;
-  --doc-text-yellow: #8a6c0a;
-  --doc-text-green: #237b35;
-  --doc-text-blue: #1971c2;
-  --doc-text-purple: #7048e8;
-  --doc-highlight-gray-soft: #f1f3f5;
-  --doc-highlight-red: #ffe3e3;
-  --doc-highlight-orange: #fff0db;
-  --doc-highlight-yellow: #fff3bf;
-  --doc-highlight-green: #d3f9d8;
-  --doc-highlight-blue: #d0ebff;
-  --doc-highlight-purple: #e5dbff;
-  --doc-highlight-gray: #dee2e6;
-  --doc-highlight-gray-strong: #ced4da;
-  --doc-highlight-red-strong: #ffc9c9;
-  --doc-highlight-orange-strong: #ffd8a8;
-  --doc-highlight-yellow-strong: #ffec99;
-  --doc-highlight-green-strong: #b2f2bb;
-  --doc-highlight-blue-strong: #a5d8ff;
-  --doc-highlight-purple-strong: #d0bfff;
-}
-
-.wendang[data-wendang-theme='dark'] {
-  --doc-text-gray: #b8beca;
-  --doc-text-red: #ff9b9b;
-  --doc-text-orange: #ffc078;
-  --doc-text-yellow: #f6d37a;
-  --doc-text-green: #8ce99a;
-  --doc-text-blue: #91caff;
-  --doc-text-purple: #d0bfff;
-  --doc-highlight-gray-soft: #32353d;
-  --doc-highlight-red: #563138;
-  --doc-highlight-orange: #523a2a;
-  --doc-highlight-yellow: #4a4226;
-  --doc-highlight-green: #294737;
-  --doc-highlight-blue: #293f5b;
-  --doc-highlight-purple: #42335b;
-  --doc-highlight-gray: #424650;
-  --doc-highlight-gray-strong: #555b66;
-  --doc-highlight-red-strong: #713f47;
-  --doc-highlight-orange-strong: #6a4b31;
-  --doc-highlight-yellow-strong: #635732;
-  --doc-highlight-green-strong: #355c44;
-  --doc-highlight-blue-strong: #355476;
-  --doc-highlight-purple-strong: #554273;
-}
+@import"./content-tokens.css";.wendang{--color-bg: #f6f8fc;--color-surface: #fff;--color-surface-subtle: #f5f7fa;--color-text: #1f2937;--color-text-muted: #667085;--color-text-faint: #7c8798;--color-border: #dce2eb;--color-border-strong: #b9c3d2;--color-accent: var(--wendang-accent, #2f6feb);--color-accent-soft: #eaf1ff;--color-danger: #cf3d48;--color-success: #21814b;--color-warning: #ad6b12;--comment-mark-bg: #ffe58f;--comment-mark-line: #d48806;--comment-mark-bg-reply: #ffd66688;--comment-mark-line-reply: #ff9900;--comment-mark-bg-active: #ffc53d;--comment-mark-line-active: #ad6800;--content-width: 100%;--shadow-pop: 0 10px 32px #14284a20;--content-scroll-offset: 80px;--color-code-bg: #f1f5fa;color:var(--color-text);background:var(--color-surface);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif;min-width:0;min-height:0}.wendang[data-wendang-theme=dark]{--color-bg: #17191e;--color-surface: #202329;--color-surface-subtle: #292d35;--color-text: #e5e9f0;--color-text-muted: #b2bdcd;--color-text-faint: #8f9cb0;--color-border: #3b4350;--color-border-strong: #606c7e;--color-accent-soft: #243653;--content-text-color: #e8e8ec;--content-heading-color: #f0f0f3;--content-table-header-bg: #2a2e38;--content-table-grid-color: #424753;--color-code-bg: #20242c;--comment-mark-bg: #4a3a12;--comment-mark-line: #e8b923;--comment-mark-bg-reply: #5c4813;--comment-mark-line-reply: #ffc53d;--comment-mark-bg-active: #6b5416;--comment-mark-line-active: #ffc53d}.wendang-root{min-height:0;min-width:0;height:100%}.wendang-portal{position:relative;z-index:1000}:is(.wendang,.wendang-popup-scope) :where(button,input,textarea):not(:where(.mind-topic-input)){font:inherit;box-sizing:border-box}:is(.wendang,.wendang-popup-scope) :where(a){color:var(--color-accent)}:is(.wendang,.wendang-popup-scope) :where(button){cursor:pointer}:is(.wendang,.wendang-popup-scope) .muted{color:var(--color-text-muted)}:is(.wendang,.wendang-popup-scope) .small{font-size:12px}:is(.wendang,.wendang-popup-scope) :where(input:not([type=checkbox]):not([type=radio]),textarea):not(.worksheet-grid *):not(:where(.mind-topic-input)){background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;padding:6px 8px}:is(.wendang,.wendang-popup-scope) :where(.error-banner,.error){color:var(--color-danger)}:is(.wendang,.wendang-popup-scope) :where(.notice){color:var(--color-text-muted)}.wendang{--doc-text-gray: #646a73;--doc-text-red: #d92c2c;--doc-text-orange: #b95d0b;--doc-text-yellow: #8a6c0a;--doc-text-green: #237b35;--doc-text-blue: #1971c2;--doc-text-purple: #7048e8;--doc-highlight-gray-soft: #f1f3f5;--doc-highlight-red: #ffe3e3;--doc-highlight-orange: #fff0db;--doc-highlight-yellow: #fff3bf;--doc-highlight-green: #d3f9d8;--doc-highlight-blue: #d0ebff;--doc-highlight-purple: #e5dbff;--doc-highlight-gray: #dee2e6;--doc-highlight-gray-strong: #ced4da;--doc-highlight-red-strong: #ffc9c9;--doc-highlight-orange-strong: #ffd8a8;--doc-highlight-yellow-strong: #ffec99;--doc-highlight-green-strong: #b2f2bb;--doc-highlight-blue-strong: #a5d8ff;--doc-highlight-purple-strong: #d0bfff}.wendang[data-wendang-theme=dark]{--doc-text-gray: #b8beca;--doc-text-red: #ff9b9b;--doc-text-orange: #ffc078;--doc-text-yellow: #f6d37a;--doc-text-green: #8ce99a;--doc-text-blue: #91caff;--doc-text-purple: #d0bfff;--doc-highlight-gray-soft: #32353d;--doc-highlight-red: #563138;--doc-highlight-orange: #523a2a;--doc-highlight-yellow: #4a4226;--doc-highlight-green: #294737;--doc-highlight-blue: #293f5b;--doc-highlight-purple: #42335b;--doc-highlight-gray: #424650;--doc-highlight-gray-strong: #555b66;--doc-highlight-red-strong: #713f47;--doc-highlight-orange-strong: #6a4b31;--doc-highlight-yellow-strong: #635732;--doc-highlight-green-strong: #355c44;--doc-highlight-blue-strong: #355476;--doc-highlight-purple-strong: #554273}

package/dist/styles/video-dialog.css

@@ -1,41 +1 @@
-/*
- * 垂直节奏：字段内部 8px，字段之间 16px，最后一段之外留出 dialog body 的
- * 底部内边距。之前的提示文字紧贴输入框、又贴着按钮行，看起来像被截断。
- */
-.video-form { display: flex; flex-direction: column; gap: 16px; }
-.video-field { display: flex; flex-direction: column; gap: 8px; }
-.video-field label { font-size: 13px; font-weight: 600; color: var(--color-text); }
-.video-field input { width: 100%; }
-.video-hint {
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.7;
-  color: var(--color-text-muted);
-}
-.video-status {
-  margin: 0;
-  padding: 8px 10px;
-  border-radius: 6px;
-  font-size: 12px;
-  line-height: 1.7;
-}
-.video-status--ok {
-  color: var(--color-text);
-  background: var(--color-accent-soft);
-}
-.video-status--error {
-  color: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
-}
-.video-status-meta {
-  margin-left: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--color-text-muted);
-}
-.video-source {
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.6;
-  color: var(--color-text-muted);
-  overflow-wrap: anywhere;
-}
+.video-form{display:flex;flex-direction:column;gap:16px}.video-field{display:flex;flex-direction:column;gap:8px}.video-field label{font-size:13px;font-weight:600;color:var(--color-text)}.video-field input{width:100%}.video-loading-option{display:flex;flex-direction:column;gap:6px}.video-loading-choice{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--color-text)}.video-loading-choice input[type=checkbox]{flex:none;width:16px;height:16px;margin:0;accent-color:var(--color-accent)}.video-loading-option .video-hint{padding-left:24px}.video-hint{margin:0;font-size:12px;line-height:1.7;color:var(--color-text-muted)}.video-status{margin:0;padding:8px 10px;border-radius:6px;font-size:12px;line-height:1.7}.video-status--ok{color:var(--color-text);background:var(--color-accent-soft)}.video-status--error{color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 8%,transparent)}.video-status-meta{margin-left:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--color-text-muted)}.video-source{margin:0;font-size:12px;line-height:1.6;color:var(--color-text-muted);overflow-wrap:anywhere}

package/dist/styles/video-embed.css

@@ -1,35 +1 @@
-/*
- * `--color-hover` 从来没有被定义过：占位区背景整条声明在计算值阶段失效，
- * 只剩正文白底，看起来像一块空白矩形。改用确定存在的 `--color-surface-subtle`
- * 并给出绝对色兜底，非 SDK 宿主也能正常着色。
- */
-.doc-video-embed { width: 100%; min-width: 0; border: 1px solid var(--color-border, #dce2eb); border-radius: 8px; overflow: hidden; background: var(--color-surface, #fff); }
-.doc-video-embed .video-placeholder {
-  min-height: 220px; padding: 28px 24px;
-  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
-  background: var(--color-surface-subtle, #f5f7fa);
-}
-.doc-video-embed .video-play-icon {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 46px; height: 46px; margin-bottom: 2px; border-radius: 50%;
-  color: var(--color-accent, #2f6feb);
-  background: var(--color-accent-soft, #eaf1ff);
-  font-size: 18px; line-height: 1; text-indent: 2px;
-}
-.doc-video-embed .video-placeholder strong { font-size: 14px; font-weight: 600; color: var(--color-text, #1f2937); }
-.doc-video-embed .video-id { font-size: 12px; color: var(--color-text-muted, #667085); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-.doc-video-embed .video-load {
-  margin-top: 4px; padding: 7px 20px;
-  color: var(--color-accent, #2f6feb); background: var(--color-accent-soft, #eaf1ff);
-  border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px;
-}
-.doc-video-embed .video-load:hover { background: color-mix(in srgb, var(--color-accent, #2f6feb) 16%, transparent); }
-.doc-video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; background: #111; }
-.doc-video-embed .video-footer {
-  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
-  padding: 10px 14px; font-size: 12px;
-  border-top: 1px solid var(--color-border, #dce2eb);
-  background: var(--color-surface, #fff);
-}
-.doc-video-embed .video-footer a { color: var(--color-accent, #2f6feb); }
-.doc-video-embed button:focus-visible, .doc-video-embed a:focus-visible { outline: 2px solid var(--color-accent, #2f6feb); outline-offset: 2px; }
+.doc-video-embed{width:100%;min-width:0;border:1px solid var(--color-border, #dce2eb);border-radius:8px;overflow:hidden;background:var(--color-surface, #fff)}.doc-video-embed .video-placeholder{min-height:220px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--color-surface-subtle, #f5f7fa)}.doc-video-embed .video-play-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:2px;border-radius:50%;color:var(--color-accent, #2f6feb);background:var(--color-accent-soft, #eaf1ff);font-size:18px;line-height:1;text-indent:2px}.doc-video-embed .video-placeholder strong{font-size:14px;font-weight:600;color:var(--color-text, #1f2937)}.doc-video-embed .video-id{font-size:12px;color:var(--color-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.doc-video-embed .video-load{margin-top:4px;padding:7px 20px;color:var(--color-accent, #2f6feb);background:var(--color-accent-soft, #eaf1ff);border:0;border-radius:6px;cursor:pointer;font:inherit;font-size:13px}.doc-video-embed .video-load:hover{background:color-mix(in srgb,var(--color-accent, #2f6feb) 16%,transparent)}.doc-video-embed iframe{display:block;width:100%;aspect-ratio:16 / 9;min-height:200px;border:0;background:#111}.doc-video-embed .video-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 14px;font-size:12px;border-top:1px solid var(--color-border, #dce2eb);background:var(--color-surface, #fff)}.doc-video-embed .video-footer a{color:var(--color-accent, #2f6feb)}.doc-video-embed button:focus-visible,.doc-video-embed a:focus-visible{outline:2px solid var(--color-accent, #2f6feb);outline-offset:2px}