wendang-react 0.0.0-stage → 0.5.6

package/dist/styles/tokens.css

@@ -0,0 +1,154 @@
+.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-font-size: 16px; --content-line-height: 1.75; --content-text-color: var(--color-text);
+  --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-heading-color: #101828;
+  --content-table-header-bg: #edf3fc;
+  --content-table-grid-color: #d5dfed;
+  --content-table-font-size: calc(var(--content-font-size) * 13 / 14);
+  --content-table-line-height: 1.5;
+  --content-media-radius: 8px;
+  --content-scroll-offset: 80px;
+  /**
+   * 块间距（段落之间）。
+   *
+   * 从 `3/7`（16px 字号下 6.86px）调到 `5/7`（11.43px）。原因有两个：
+   *  1. 6.86px 对中文正文偏紧，段与段之间读起来粘连（用户反馈"行间距处理下"）；
+   *  2. 块选中时会沿块上下各外扩一段做高亮带，而外扩必须给相邻块之间保留
+   *     可见的白缝——间距太小时这段预算不够，两个块的底色会糊成一整块
+   *     （用户实测："带了选中背景后上下间距没了"）。
+   */
+  --space-block: calc(var(--content-font-size) * 5 / 7);
+  --space-module: calc(var(--content-font-size) * 9 / 7);
+  --space-heading-top: calc(var(--content-font-size) * 2);
+  --space-heading-bottom: calc(var(--content-font-size) * 5 / 7);
+  --space-list-item: calc(var(--content-font-size) * 0.25);
+  --space-list-block: calc(var(--content-font-size) * 0.5);
+  --space-divider: calc(var(--content-font-size) * 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;
+}

package/dist/styles/video-dialog.css

@@ -0,0 +1,41 @@
+/*
+ * 垂直节奏：字段内部 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;
+}

package/dist/styles/video-embed.css

@@ -0,0 +1,35 @@
+/*
+ * `--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; }