wendang-react 0.6.3 → 0.6.4

package/dist/styles/content-style.css

@@ -1,619 +1 @@
-@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: var(--content-table-radius);
-  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: var(--content-table-padding-y) var(--content-table-padding-x);
-  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: var(--content-gallery-gap);
-  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)); }
+@import"./code-block.css";@import"./callout.css";.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}.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}.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:-.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,.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)}.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:.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)}.ywiki-content li.doc-task-item>input[type=checkbox]{margin-top:calc((var(--content-line-height) - 1) * .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:.1em 0 .1em 1em;color:var(--color-text-muted)}.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}.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:.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;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:var(--content-table-radius);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:var(--content-table-padding-y) var(--content-table-padding-x);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)}.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}.ywiki-content .doc-image-gallery{gap:var(--content-gallery-gap);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))}.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{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)}@property --ywiki-image-flow-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.ywiki-content .doc-image[data-loading]{box-sizing:border-box;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;min-height:120px}.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}.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}}.ywiki-content .doc-image[data-sized],.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}.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:.05em .35em;font-size:.95em;font-weight:500;white-space:nowrap}.ywiki-content mark,.ywiki-content .doc-mark-highlight{background:color-mix(in srgb,var(--color-warning) 30%,transparent);border-radius:2px;padding:.05em .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:.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:.875em;color:var(--color-danger)}.doc-math-error-hint{margin-left:6px;font-size:.85em;opacity:.8}.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}.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}.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)}.ywiki-content :where(li:not(.doc-task-item):not(ul[data-type=taskList]>li),li>div,li>span)>*+*{margin-top:var(--space-list-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(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:.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))}

package/dist/styles/content-tokens.css

@@ -1,29 +1 @@
-/* Generated from wendang/shared CONTENT_PRESENTATION. */
-.wendang {
-  --content-font-size: 16px;
-  --content-line-height: 1.75;
-  --content-text-color: var(--color-text);
-  --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-table-radius: 6px;
-  --content-table-padding-x: 8px;
-  --content-table-padding-y: 6px;
-  --content-media-radius: 8px;
-  --content-gallery-gap: 12px;
-  --content-callout-radius: 9px;
-  --content-callout-padding-x: 18px;
-  --content-callout-padding-y: 16px;
-  --content-callout-icon-width: 30px;
-  --content-callout-icon-size: 22px;
-  --content-callout-gap: 12px;
-  --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);
-}
+.wendang{--content-font-size: 16px;--content-line-height: 1.75;--content-text-color: var(--color-text);--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-table-radius: 6px;--content-table-padding-x: 8px;--content-table-padding-y: 6px;--content-media-radius: 8px;--content-gallery-gap: 12px;--content-callout-radius: 9px;--content-callout-padding-x: 18px;--content-callout-padding-y: 16px;--content-callout-icon-width: 30px;--content-callout-icon-size: 22px;--content-callout-gap: 12px;--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) * .25);--space-list-block: calc(var(--content-font-size) * .5);--space-divider: calc(var(--content-font-size) * 2)}