wendang-react 0.0.0-stage → 0.5.5

package/dist/styles/code-block.css

@@ -0,0 +1,58 @@
+/* One shell for the editor node view and the read-only renderer. */
+.ywiki-content .ywiki-code-panel {
+  --code-bg:#ffffff;--code-header:#f7f8fa;--code-border:#e2e5e9;--code-text:#303640;--code-muted:#8a9099;
+  --code-keyword:#d13b52;--code-string:#2e8764;--code-number:#a66e12;--code-title:#8250b5;--code-property:#476f9c;--code-comment:#8a9099;--code-tag:#bf3c51;
+  position:relative;min-width:0;max-width:100%;border:1px solid var(--code-border);border-radius:7px;
+  background:var(--code-bg);color:var(--code-text);isolation:isolate;
+}
+.ywiki-content .ywiki-code-panel.code-theme-soft {
+  --code-bg:#f5f8fc;--code-header:#edf2f8;--code-border:#dce4ef;--code-text:#34445b;--code-muted:#8492a7;
+  --code-keyword:#3478bd;--code-string:#318b6d;--code-number:#9b7a1e;--code-title:#9851c4;--code-property:#516c9f;--code-comment:#8492a7;--code-tag:#b14c6c;
+}
+[data-wendang-theme='dark'] .ywiki-content .ywiki-code-panel.code-theme-auto,
+.ywiki-content .ywiki-code-panel.code-theme-night {
+  --code-bg:#20242c;--code-header:#272c35;--code-border:#373e49;--code-text:#d7dde7;--code-muted:#929cac;
+  --code-keyword:#f58196;--code-string:#a5cf8b;--code-number:#efbc82;--code-title:#c6a0ee;--code-property:#89b9ee;--code-comment:#919cab;--code-tag:#f08a9d;
+}
+.code-toolbar {display:flex;align-items:center;gap:7px;min-height:38px;padding:4px 9px;background:var(--code-header);border-bottom:1px solid var(--code-border);border-radius:6px 6px 0 0;font:12px/1.5 var(--font-sans,system-ui,sans-serif);color:var(--code-muted);user-select:none;}
+.code-toolbar-host {position:relative;z-index:2;}
+.code-toolbar-actions {display:flex;align-items:center;gap:7px;margin-left:auto;min-width:0;}
+.code-toolbar-summary {font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;}
+/*
+ * 语言选择器在代码块的深色标题栏里，必须把 wui 的语义变量改指向代码块色板，
+ * 否则会是一块白底控件。面板本身渲染在 portal 根（正文之外），不继承这些
+ * 变量，因此下拉列表仍是普通的浅色菜单 —— 与其它菜单一致。
+ */
+.code-language-select {width:146px;font-size:12px;--w-surface:var(--code-header);--w-text:var(--code-text);--w-text-faint:var(--code-muted);--w-border-strong:var(--code-border);--w-border:var(--code-border);--w-surface-subtle:color-mix(in srgb,var(--code-text) 10%,transparent);}
+.code-language-label {max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
+.code-toolbar-divider {height:15px;border-left:1px solid var(--code-border);margin:0 2px;}
+.code-toolbar .code-copy-button,.code-toolbar .code-settings-button,.code-toolbar .code-fold-button {color:var(--code-muted);background:transparent;}
+.code-toolbar .code-copy-button {min-width:86px;}
+.code-toolbar .code-copy-button:hover,.code-toolbar .code-settings-button:hover,.code-toolbar .code-fold-button:hover {color:var(--code-text);background:color-mix(in srgb,var(--code-text) 6%,transparent);}
+.code-copy-button svg {vertical-align:middle;}
+.code-copy-announcement {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
+.code-option-check {float:right;margin-left:24px;}
+.code-theme-swatch {display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:8px;border:1px solid #c7ccd4;border-radius:3px;background:#fff;}
+.code-theme-swatch[data-code-swatch='auto'] {background:linear-gradient(90deg,#fff 50%,#303743 50%);}
+.code-theme-swatch[data-code-swatch='soft'] {background:#e6effa;}
+.code-theme-swatch[data-code-swatch='night'] {background:#272c35;}
+.ywiki-content .ywiki-code-panel .code-scroll {display:flex;align-items:stretch;position:relative;overflow:auto;max-height:464px;border-radius:0 0 6px 6px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--code-muted) 45%,transparent) transparent;background:var(--code-bg);}
+.ywiki-content .ywiki-code-panel .code-scroll[hidden] {display:none;}
+.ywiki-content .ywiki-code-panel.is-unlimited .code-scroll {max-height:none;}
+.ywiki-content .ywiki-code-panel .code-line-numbers,
+.ywiki-content .ywiki-code-panel pre.doc-code {font:13px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-variant-ligatures:none;tab-size:2;white-space:pre;}
+.ywiki-content .ywiki-code-panel .code-line-numbers {position:sticky;left:0;z-index:1;align-self:stretch;flex:0 0 auto;min-width:42px;box-sizing:border-box;padding:12px 10px 12px 12px;text-align:right;color:var(--code-muted);background:var(--code-bg);border-right:1px solid color-mix(in srgb,var(--code-border) 65%,transparent);user-select:none;pointer-events:none;}
+.ywiki-content .ywiki-code-panel pre.doc-code {flex:1 0 auto;min-width:0;max-width:none;margin:0!important;padding:12px 16px;border:0;border-radius:0;background:var(--code-bg);color:var(--code-text);overflow:visible;}
+.ywiki-content .ywiki-code-panel pre.doc-code code {display:block;margin:0;padding:0;border:0;background:none;color:var(--code-text);font:inherit;white-space:inherit;tab-size:inherit;border-radius:0;}
+.ywiki-content .ywiki-code-panel.is-collapsed .code-toolbar {border-bottom:0;border-radius:6px;}
+.ywiki-content .ywiki-code-panel:focus-within {border-color:color-mix(in srgb,var(--color-accent) 45%,var(--code-border));}
+.ywiki-content .ywiki-code-panel .code-scroll:focus-visible {outline:2px solid var(--color-accent);outline-offset:-2px;}
+.ywiki-content .ywiki-code-panel :where(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-meta) {color:var(--code-keyword);}
+.ywiki-content .ywiki-code-panel :where(.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute) {color:var(--code-string);}
+.ywiki-content .ywiki-code-panel :where(.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-variable,.hljs-template-variable) {color:var(--code-number);}
+.ywiki-content .ywiki-code-panel :where(.hljs-title,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-type) {color:var(--code-title);}
+.ywiki-content .ywiki-code-panel :where(.hljs-built_in,.hljs-attr,.hljs-property) {color:var(--code-property);}
+.ywiki-content .ywiki-code-panel :where(.hljs-comment,.hljs-quote) {color:var(--code-comment);font-style:normal;}
+.ywiki-content .ywiki-code-panel :where(.hljs-tag,.hljs-name,.hljs-deletion) {color:var(--code-tag);}
+@media(max-width:600px){.code-toolbar{gap:4px;padding-inline:6px}.code-toolbar-actions{gap:4px}.code-language-select{width:108px}.code-toolbar-summary{display:none}.code-toolbar-divider{margin:0}.code-language-label{max-width:100px}.code-copy-button{min-width:72px!important}}
+@media print{.ywiki-content .ywiki-code-panel .code-scroll{max-height:none!important;overflow:visible!important;display:flex!important}.code-toolbar-actions,.code-fold-button{display:none!important}.ywiki-content .ywiki-code-panel{break-inside:avoid}.ywiki-content .ywiki-code-panel pre.doc-code{white-space:pre-wrap;overflow-wrap:anywhere;flex-shrink:1}}

package/dist/styles/content-style.css

@@ -0,0 +1,619 @@
+@import './code-block.css';
+@import './callout.css';
+
+/**
+ * 内容排版**单一真源**。
+ *
+ * 为什么单独一个文件（对齐《Wiki好用技术方案》1.1 的「单一 schema 真源」）：
+ * 正文的观感必须在**编辑态与只读态完全一致**。此前编辑端样式写在
+ * `EditorPane.vue` 的 `.ywiki-prose`、只读端写在 `renderer/renderer.css`
+ * 的 `.doc-renderer`，两份各改各的——实测已经漂移（标题上间距 1.2em vs 1.6em、
+ * h5/h6 两端都没定义）。这里收敛为一份，两端只在根元素上带同一个类
+ * `ywiki-content`：
+ *   - 编辑端：`editorProps.attributes.class = 'ywiki-prose ywiki-content'`
+ *   - 只读端：`DocRenderer` 根节点 `class="doc-renderer ywiki-content"`
+ *
+ * 只保留「只有一端才有」的规则在各自文件里（如编辑端的块手柄、只读端的
+ * 图片懒加载占位）。凡是两端都会渲染的元素，样式只写在这里。
+ *
+ * 尺度以 docs/Wiki内容区域规范.md 为准；数值是 YWiki 的产品基线。
+ * 块间距由文件末尾的 flow 规则统一处理，容器结构使用 :where()，确保编辑根
+ * 与阅读根以及兼容 .doc-body 容器的选择器优先级相同。元素规则不再各自声明纵向 margin。
+ */
+
+/* ---------------------------------------------------------------- 根与节奏 */
+.ywiki-content {
+  min-width: 0;
+  container-type: inline-size;
+  container-name: wiki-content;
+  font-size: var(--content-font-size);
+  line-height: var(--content-line-height);
+  color: var(--content-text-color);
+  /* 标点空白裁剪（支持的浏览器生效）；不修改正文中的中英文空格。 */
+  text-spacing-trim: space-all;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+/* reset 与 flow 都只有 .ywiki-content 的一份 class 权重。
+   避免 p/ul/pre 的 margin: 0 压过编辑端的相邻块间距。 */
+.ywiki-content :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, table, hr, img) {
+  margin-block: 0;
+}
+/* 用户输入的空段落也必须在阅读端保留一行，不能只在编辑端占高度。 */
+.ywiki-content p:empty {
+  min-height: calc(1em * var(--content-line-height));
+}
+.ywiki-content :where(h1, h2, h3, h4, h5, h6):empty {
+  min-height: 1.3em;
+}
+
+/* ---------------------------------------------------------------- 标题层级
+   标题字号随正文 token 等比缩放。
+   字重统一 600（原 650 偏重），标题带轻微负字距更像正文排版而非 UI 文本。 */
+.ywiki-content h1,
+.ywiki-content h2,
+.ywiki-content h3,
+.ywiki-content h4,
+.ywiki-content h5,
+.ywiki-content h6 {
+  font-weight: 600;
+  color: var(--content-heading-color);
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  /* 目录跳转时留出顶部空间，避免标题被页头挡住 */
+  scroll-margin-top: var(--content-scroll-offset);
+}
+.ywiki-content h1 { font-size: calc(var(--content-font-size) * 1.625); }
+.ywiki-content h2 { font-size: calc(var(--content-font-size) * 1.375); }
+.ywiki-content h3 { font-size: calc(var(--content-font-size) * 1.125); }
+.ywiki-content h4 { font-size: var(--content-font-size); }
+.ywiki-content h5 { font-size: var(--content-font-size); }
+.ywiki-content h6 {
+  font-size: var(--content-font-size);
+  color: var(--color-text-muted);
+  letter-spacing: 0;
+}
+
+/* ---------------------------------------------------------------- 列表 */
+.ywiki-content ul,
+.ywiki-content ol {
+  padding-left: 1.5em;
+}
+.ywiki-content ul { list-style: disc; }
+.ywiki-content ol { list-style: decimal; }
+/* 层级用不同符号区分，长嵌套下更容易看清层级。 */
+.ywiki-content ul ul { list-style: circle; }
+.ywiki-content ul ul ul { list-style: square; }
+.ywiki-content li + li { margin-top: var(--space-list-item); }
+.ywiki-content li::marker { color: var(--color-text-muted); }
+/* 列表项段落的 reset 与内部间距同样由 flow 规则提供。 */
+
+/* 待办列表：编辑端是 ul[data-type='taskList']，只读端是 ul.doc-task-list。
+   勾选框与正文左缘齐平、且与首行文字垂直居中（此前水平缩进 4px、垂直偏低约 5px，
+   用户反馈"不对齐"）。刻意不用普通列表的 1.5em 缩进——待办项希望勾选框与
+   上方段落左对齐，读起来是一条直线。 */
+.ywiki-content ul.doc-task-list,
+.ywiki-content ul[data-type='taskList'] {
+  list-style: none;
+  padding-left: 0;
+}
+.ywiki-content li.doc-task-item,
+.ywiki-content ul[data-type='taskList'] > li {
+  display: flex;
+  gap: 0.5em;
+  align-items: flex-start;
+  line-height: var(--content-line-height);
+}
+.ywiki-content li.doc-task-item > input[type='checkbox'],
+.ywiki-content ul[data-type='taskList'] > li > label > input[type='checkbox'] {
+  flex: none;
+  font: inherit;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  accent-color: var(--color-accent);
+}
+/* 阅读端的 input 直接参与任务项布局，用上边距对齐首行。
+   编辑端由首行等高的 label 居中，不能再给 input 叠加这段偏移。 */
+.ywiki-content li.doc-task-item > input[type='checkbox'] {
+  margin-top: calc((var(--content-line-height) - 1) * 0.5em);
+}
+.ywiki-content li.doc-task-item > span,
+.ywiki-content ul[data-type='taskList'] > li > div {
+  min-width: 0;
+  flex: 1;
+}
+
+/* ---------------------------------------------------------------- 引用 */
+.ywiki-content blockquote {
+  border-left: 3px solid var(--color-border-strong);
+  padding: 0.1em 0 0.1em 1em;
+  color: var(--color-text-muted);
+}
+
+/* 代码块外观由 code-block.css 统一；裸 pre 用于兼容内容。 */
+.ywiki-content pre { overflow:auto; padding:12px 16px; border:1px solid var(--color-border); border-radius:6px; background:var(--color-code-bg); font:13px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
+.ywiki-content code { background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:4px;padding:.1em .35em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875em; }
+
+/* ---------------- 编辑端：公式就地编辑（nodeView） ---------------- */
+.math-node { cursor: pointer; }
+/* 渲染结果就位后，把它包在带淡底的容器里，提示"这是一段可点击编辑的公式" */
+.math-node .math-render { border-radius: 4px; }
+.math-node:hover .math-render {
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+.math-node.is-editing .math-render { display: none; }
+.math-latex-input {
+  width: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 2px 6px;
+  border: 1px solid var(--color-accent);
+  border-radius: 4px;
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+/* ---------------------------------------------------------------- 表格
+   文档网格：白色内容区、浅色表头、圆角外框；读写端共用。 */
+.ywiki-content table,
+.ywiki-content .doc-table {
+  --table-grid-color: var(--content-table-grid-color);
+  --table-header-bg: var(--content-table-header-bg);
+  border-collapse: separate;
+  border-spacing: 0;
+  /* 无显式列宽时按内容分配，避免说明列与短标签列被强制等分。
+     有 colwidth 的表格仍通过两端共同的 colgroup + 表宽保留作者尺寸。 */
+  table-layout: auto;
+  width: 100%;
+  font-size: var(--content-table-font-size);
+  background: var(--color-surface);
+  border: 1px solid var(--table-grid-color);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.ywiki-content :where(.doc-table-wrap, .tableWrapper) {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+.ywiki-content th,
+.ywiki-content td {
+  border: none;
+  border-right: 1px solid var(--table-grid-color);
+  border-bottom: 1px solid var(--table-grid-color);
+  padding: 6px 8px;
+  line-height: var(--content-table-line-height);
+  min-width: 60px;
+  text-align: left;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+.ywiki-content th {
+  background: var(--table-header-bg);
+  color: var(--content-heading-color);
+  font-weight: 600;
+}
+.ywiki-content tr:last-child > :where(td, th) { border-bottom: none; }
+.ywiki-content tr > :where(td, th):last-child { border-right: none; }
+.ywiki-content tr:first-child > :where(td, th):first-child { border-top-left-radius: 5px; }
+.ywiki-content tr:first-child > :where(td, th):last-child { border-top-right-radius: 5px; }
+.ywiki-content tr:last-child > :where(td, th):first-child { border-bottom-left-radius: 5px; }
+.ywiki-content tr:last-child > :where(td, th):last-child { border-bottom-right-radius: 5px; }
+
+/* ---------------------------------------------------------------- 分割线 */
+.ywiki-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+}
+
+/* ---------------------------------------------------------------- 图片 */
+/* 图注（阅读端由 DocRenderer 渲染在图片下方） */
+.ywiki-content .doc-image-caption {
+  margin-top: 6px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ywiki-content .doc-image-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+.ywiki-content .doc-image-gallery > .doc-image[data-sized] {
+  /* 图库内的图由容器统一排布，忽略作者对单图设置的宽度。 */
+  margin-inline: 0;
+}
+/**
+ * 图片行：按比例铺满整行（与编辑态同一口径）。
+ *
+ * 列宽由 `flex-grow: 比例` 分配，高度由 `aspect-ratio` 自动产生，
+ * 因此同行几乎等高、右侧没有空白。
+ */
+.ywiki-content .doc-image-gallery {
+  gap: 12px;
+  align-items: flex-start;
+}
+.ywiki-content .doc-image-gallery > .doc-image {
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  margin: 0;
+  aspect-ratio: var(--doc-image-aspect-ratio, 1.3333);
+  object-fit: contain;
+  /* 权重 = 原始比例 × 用户拖角设定的相对缩放 */
+  flex-grow: calc(var(--doc-image-aspect-ratio, 1) * var(--doc-image-weight, 1));
+}
+/**
+ * 带图注的图片在图片行里被一层 `<figure>` 包住，因此 **figure 才是 flex 子项**。
+ *
+ * 缺了这条规则时 figure 用默认 `flex: 0 1 auto`，按内部图片的固有宽度占位，
+ * 整行被挤成多行（实测两张 4:3 图变成上下两行、右侧留白），与"按比例铺满"
+ * 的口径不一致。变量由渲染器同时写到 figure 上（见 DocRenderer 的 galleryVars）。
+ */
+.ywiki-content .doc-image-gallery > .doc-image-figure {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  flex-grow: calc(var(--doc-image-aspect-ratio, 1) * var(--doc-image-weight, 1));
+}
+.ywiki-content .doc-image-gallery > .doc-image-figure > .doc-image {
+  /* 图注容器已按比例分到列宽，图片铺满容器即可。 */
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+.ywiki-content .doc-image-gallery > .doc-image-figure > .doc-image-caption {
+  /* 行内已有 12px 列间距，图注不再额外缩进，跟随图片列宽。 */
+  margin-inline: 0;
+}
+.ywiki-content img,
+.ywiki-content .doc-image {
+  display: block;
+  margin-inline: auto;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--content-media-radius);
+}
+
+/**
+ * 图片读取中：**渐变沿边框流动**的加载指示。
+ *
+ * ## 为什么不再用"整块灰底 + 微光"
+ *
+ * 静态灰块在浅色页面上几乎看不出是在加载，看起来更像"图丢了"或"这里是一块
+ * 空白"（用户多轮反馈）。改成一条沿边框奔跑的渐变——像贪吃蛇那样顺着圆角
+ * 绕圈，既明确表达"正在取"，又不会往图片区域里填任何东西。
+ *
+ * ## 实现要点
+ *
+ * 1. **conic-gradient + 遮罩挖空**：整块铺一个锥形渐变，再用
+ *    `mask-composite: exclude` 把中间挖掉，只留 2px 的一圈。
+ *    `<img>` 是替换元素、`::before` 不渲染，所以不能像普通元素那样做双层。
+ * 2. **旋转靠 `@property` 注册角度变量**：conic-gradient 的 `from` 角度是离散值，
+ *    只有注册成 `<angle>` 类型才能被 `@keyframes` 平滑插值。不支持 `@property`
+ *    的浏览器会停在静态渐变上（仍有边框，只是不转）。
+ * 3. **加载完成时 `data-loading` 消失** → 遮罩一并移除，图片正常显示，
+ *    不会因为残留的 mask 把图片裁掉。
+ */
+@property --ywiki-image-flow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.ywiki-content .doc-image[data-loading] {
+  box-sizing: border-box;
+  /* 这 3px 就是"边框"的厚度：遮罩只保留它，中间透明 */
+  padding: 3px;
+  border-radius: var(--content-media-radius);
+  background-image: conic-gradient(
+    from var(--ywiki-image-flow-angle),
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 0turn 55%,
+    color-mix(in srgb, var(--color-accent) 55%, transparent) 78%,
+    var(--color-accent) 92%,
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 100%
+  );
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-clip: content-box, border-box;
+  mask-composite: exclude;
+  animation: ywiki-image-flow 1.4s linear infinite;
+  /* 独立图片没有 aspect-ratio 可撑高：给一个最小高度，否则框不可见 */
+  min-height: 120px;
+}
+/* 图片行内的高度由 aspect-ratio 决定，不要再叠加最小高度（会把行撑高） */
+.ywiki-content .doc-image-gallery > .doc-image[data-loading] {
+  min-height: 0;
+}
+@keyframes ywiki-image-flow {
+  to { --ywiki-image-flow-angle: 360deg; }
+}
+/**
+ * 加载失败：一条很淡的实线边框 + 极浅底色，**不流动**。
+ *
+ * 与"加载中"靠"有没有在转"区分：正在转 = 还在取，静止 = 取不到。不需要图标
+ * 或文字（它们在大块图片里比图片本身还抢眼，用户实测反馈更丑）。
+ * 不用虚线：虚线在缩略图上会碎成一段段，看起来像边框画错了。
+ */
+.ywiki-content .doc-image[data-image-error] {
+  box-sizing: border-box;
+  min-height: 72px;
+  background-color: color-mix(in srgb, var(--color-surface-subtle) 70%, var(--color-border));
+  border-radius: var(--content-media-radius);
+  outline: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
+  outline-offset: -1px;
+  /*
+   * 破图图标不在这里处理：组件在失败时给 `<img>` 换上透明像素（见
+   * `LazyAttachmentImage` 的 `TRANSPARENT_PIXEL`）。CSS 侧的 `content: ''`、
+   * `text-indent`、`font-size: 0` 都盖不住浏览器为失败图片绘制的那个图标。
+   */
+}
+.ywiki-content .doc-image-gallery > .doc-image[data-image-error] {
+  min-height: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  /* 减少动效：保留渐变的光段，只是不再旋转 */
+  .ywiki-content .doc-image[data-loading] {
+    animation: none;
+  }
+}
+
+/*
+ * 作者显式缩放过的图片（data-sized）：**左对齐**，宽度即作者设定值。
+ * 与编辑端同一口径（EditorPane 的 .ywiki-image-frame[data-sized]）：
+ * 缩放锚点固定在左缘，编辑端与阅读端观感一致；未缩放的图仍居中。
+ */
+.ywiki-content .doc-image[data-sized] {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+/*
+ * 图片工具条设置的显式对齐（data-align）优先于上面的默认规则。
+ * 三端共用同一语义：编辑端用 flex 对齐容器，阅读端用 margin 对齐图片。
+ */
+.ywiki-content .doc-image[data-align='left'] { margin-left: 0; margin-right: auto; }
+.ywiki-content .doc-image[data-align='center'] { margin-left: auto; margin-right: auto; }
+.ywiki-content .doc-image[data-align='right'] { margin-left: auto; margin-right: 0; }
+
+/* ---------------------------------------------------------------- 链接与行内 chip */
+.ywiki-content a,
+.ywiki-content .doc-link {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+.ywiki-content a:hover,
+.ywiki-content .doc-link:hover { text-decoration: underline; }
+
+/* 页面引用：蓝色文字 + 淡下划线。 */
+.ywiki-content .doc-page-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
+}
+.ywiki-content .doc-page-link:hover {
+  border-bottom-color: var(--color-accent);
+  text-decoration: none;
+}
+.ywiki-content .doc-page-link-plain { color: var(--color-text); }
+
+/* @提及：蓝色药丸 */
+.ywiki-content .doc-mention {
+  color: var(--color-accent);
+  background: var(--color-accent-soft);
+  border-radius: 4px;
+  padding: 0.05em 0.35em;
+  font-size: 0.95em;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* 文字高亮：无自定义颜色时的默认底色（自定义色走内联 style 覆盖） */
+.ywiki-content mark,
+.ywiki-content .doc-mark-highlight {
+  background: color-mix(in srgb, var(--color-warning) 30%, transparent);
+  border-radius: 2px;
+  padding: 0.05em 0.1em;
+  color: inherit;
+}
+
+/* ---------------------------------------------------------------- 分栏 */
+.ywiki-content .doc-columns {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.ywiki-content .doc-column { flex: 1 1 0; min-width: 0; }
+.ywiki-content .doc-column > *:first-child { margin-top: 0; }
+@media (max-width: 560px) {
+  .ywiki-content .doc-columns { flex-direction: column; gap: 10px; }
+}
+@container wiki-content (max-width: 560px) {
+  .ywiki-content .doc-columns { flex-direction: column; gap: 10px; }
+}
+
+/* ---------------------------------------------------------------- 公式 */
+.ywiki-content .doc-math-inline { display: inline-block; vertical-align: middle; }
+.ywiki-content .doc-math-block {
+  display: block;
+  overflow-x: auto;
+  padding: 8px 0;
+  text-align: center;
+}
+.doc-math-pending {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875em;
+  color: var(--color-text-muted);
+}
+.doc-math-error {
+  border: 1px dashed color-mix(in srgb, var(--color-danger) 50%, transparent);
+  border-radius: 4px;
+  padding: 0 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875em;
+  color: var(--color-danger);
+}
+.doc-math-error-hint { margin-left: 6px; font-size: 0.85em; opacity: 0.8; }
+
+/* ---------------------------------------------------------------- 文件与媒体
+   编辑 NodeView 与阅读卡片的结构类不同，盒模型与正文均由这一份样式提供。 */
+.ywiki-content :where(.doc-file, .doc-file-attachment) {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: var(--color-surface-subtle);
+  font-size: 14px;
+  color: var(--color-text-muted);
+}
+.ywiki-content .doc-file-head { display: flex; align-items: center; gap: 8px; }
+.ywiki-content .doc-file-icon { flex: none; }
+.ywiki-content .doc-file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ywiki-content .doc-file-size { flex: none; font-size: 12px; color: var(--color-text-faint); }
+.ywiki-content .doc-file-action {
+  flex: none;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  border-radius: 6px;
+  padding: 2px 10px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.ywiki-content .doc-file-action:hover { color: var(--color-accent); border-color: var(--color-accent); }
+.ywiki-content video.doc-file-video {
+  display: block;
+  width: 100%;
+  max-height: 420px;
+  margin-top: 8px;
+  border-radius: 6px;
+  background: #000;
+}
+.ywiki-content img.doc-file-image {
+  display: block;
+  max-width: 100%;
+  margin: 8px 0 0;
+  border-radius: 6px;
+}
+
+/* ---------------------------------------------------------------- 行内评论高亮
+   编辑端与只读端共用同一套观感。
+
+   ## 同一黄色系三档，靠深浅表达强弱
+
+   早先用 `--color-warning`（偏橙棕）叠 22%，是脏橘色、与正文高亮分不清；
+   后来改淡米黄又太浅（"看不到评论的选中区"）；再后来"有回复"用蓝色区分，
+   用户反馈与黄色差别太大、容易误读成两类东西（"可以搞多色，但是不要影响
+   用户心智"）。
+
+   现在三档都在黄色家族里：普通评论亮黄底 + 深琥珀下划线，有回复加深一档，
+   激活再深一档。下划线用深琥珀而不是亮黄——底色变亮后，浅色下划线在浅蓝
+   或白色背景上都看不清（用户反馈"这个看不清，底部和背景色"）。
+
+   ## 方角，不用圆角
+
+   `border-radius: 0`（用户明确要求）。标记是"文字底下的一条色带"，
+   圆角会让它在行内显得像按钮。
+
+   ## 提示不用原生 title
+
+   `title` 由浏览器绘制、样式不可控，这里由 `shared/comment-hint.ts` 自绘。 */
+.ywiki-content .doc-inline-comment {
+  background: var(--comment-mark-bg, #ffe58f);
+  border-bottom: 2px solid var(--comment-mark-line, #d48806);
+  border-radius: 0;
+  /* 让底色与文字之间留一点空隙，读起来像"标记"而不是"文字被染色" */
+  padding-bottom: 1px;
+  cursor: pointer;
+}
+.ywiki-content .doc-inline-comment.has-replies {
+  background: var(--comment-mark-bg-reply, #ffd666);
+  border-bottom-color: var(--comment-mark-line-reply, #ad6800);
+}
+.ywiki-content .doc-inline-comment.is-active {
+  background: var(--comment-mark-bg-active, #ffc53d);
+  border-bottom-color: var(--comment-mark-line-active, #ad6800);
+  /* 激活项加一圈同色细边：与"有评论"区分开，一眼看出当前在看哪条 */
+  outline: 1px solid var(--comment-mark-line-active, #ad6800);
+  outline-offset: 1px;
+}
+/* 原文被改动：零宽落点用左侧竖线标记，避免伪装成正常高亮 */
+.ywiki-content .doc-inline-comment.is-shifted {
+  border-left: 2px solid var(--color-danger);
+  padding-left: 1px;
+  background: transparent;
+}
+
+/* ---------------------------------------------------------------- 块流
+   两端的结构路径放进 :where()，统一为 (0,1,0) 权重。规则放在元素 reset 之后，
+   不以 !important 或逐个给 h/p 添加 class 来补偿 DOM 包装差异。
+   引用、高亮块、分栏、单元格内部使用同一节奏，首尾不产生额外空白。 */
+.ywiki-content > * + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > * + * {
+  margin-top: var(--space-block);
+}
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6),
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > :where(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--space-heading-top);
+}
+/* 标题与其后的内容是一组，连续标题也保持紧凑。 */
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6) + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > :where(h1, h2, h3, h4, h5, h6) + * {
+  margin-top: var(--space-heading-bottom);
+}
+/* 待办项的 label 和内容容器横向排列，不在二者之间加纵向块间距。 */
+/* TaskItem 的编辑 node view 没有 data-type，必须根据父 taskList 识别。 */
+.ywiki-content :where(li:not(.doc-task-item):not(ul[data-type='taskList'] > li), li > div, li > span) > * + * {
+  margin-top: var(--space-list-block);
+}
+/* 结构模块与普通段落分开：两边都留模块间距，不能由短段距挤在一起。
+   编辑 nodeView 与阅读包装分别列明，单元格最后再按其内部紧凑规则覆盖。 */
+.ywiki-content > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block) ,
+.ywiki-content > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block) + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block),
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(ul, ol, blockquote, pre, table, img, .tableWrapper, .doc-table-wrap, .code-block-wrap, .doc-code-wrap, .ywiki-image-frame, .doc-image, .doc-callout, .doc-columns, .doc-file-attachment, .doc-file-video, .doc-video-embed, [data-video-embed], .doc-math-block, .math-block) + * {
+  margin-top: var(--space-module);
+}
+/* 标题是章节边界；即使前面是表格、代码或媒体，也保留足够章节留白。 */
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6),
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--space-heading-top);
+}
+.ywiki-content > :where(h1, h2, h3, h4, h5, h6) + *,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column) > :where(h1, h2, h3, h4, h5, h6) + * {
+  margin-top: var(--space-heading-bottom);
+}
+.ywiki-content > hr,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th) > hr {
+  margin-block: var(--space-divider);
+}
+.ywiki-content > :first-child,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th, li, li > div, li > span) > :first-child {
+  margin-top: 0;
+}
+.ywiki-content > :last-child,
+.ywiki-content :where(.doc-body, blockquote, .doc-callout-content, .doc-column, td, th, li, li > div, li > span) > :last-child {
+  margin-bottom: 0;
+}
+
+/* 文档表格有自己的紧凑节奏，仍保留作者输入的空段落与显式加粗。 */
+.ywiki-content :where(td, th) > * + * { margin-top: 0.25em; }
+.ywiki-content :where(td, th) > :first-child { margin-top: 0; }
+.ywiki-content :where(td, th) > :where(p, ul, ol) { font-weight: inherit; }
+.ywiki-content :where(td, th) > p:empty { min-height: calc(1em * var(--content-table-line-height)); }