@tnotesjs/ui 0.4.1 → 0.4.3

package/src/markdown/lineBreaks.ts

@@ -0,0 +1,133 @@
+/**
+ * kb-level line-break mode (`tnotes.json` → `markdown.lineBreaks`), shared by
+ * the SSG and Desk's card renderers so both draw the same note the same way.
+ *
+ * `visual` keeps what the editor shows: a single newline renders as `<br>`, and
+ * every blank line beyond the first between two top-level blocks becomes a
+ * one-line spacer; inside callout bodies (title and closing fence included)
+ * every blank line does. Lists and quotes keep CommonMark spacing; their inner blank lines
+ * decide loose/tight and have no stable visual meaning. Fences, tables and
+ * HTML are single tokens, so their contents are never touched.
+ */
+
+export type LineBreakMode = 'commonmark' | 'visual'
+
+export const BLANK_LINE_CLASS = 'tn-blank-line'
+
+export const BLANK_LINE_HTML = `<div class="${BLANK_LINE_CLASS}" aria-hidden="true"></div>\n`
+
+export function resolveLineBreakMode(value: unknown): LineBreakMode {
+  return value === 'visual' ? 'visual' : 'commonmark'
+}
+
+/** Structural subset of markdown-it's Token, so this module stays dependency-free. */
+interface BlockToken {
+  type: string
+  block: boolean
+  nesting: number
+  level: number
+  map: [number, number] | null
+  content: string
+}
+
+interface CoreState {
+  src: string
+  tokens: BlockToken[]
+  Token: new (type: string, tag: string, nesting: -1 | 0 | 1) => BlockToken
+}
+
+interface MarkdownLike {
+  set(options: { breaks: boolean }): unknown
+  core: { ruler: { push(name: string, rule: (state: CoreState) => void): void } }
+}
+
+const CALLOUT_OPEN = /^container_(?:info|tip|warning|danger|details)_open$/
+const CONTAINER_FENCE = /^\s*:{3,}\s*$/
+
+/** Callout bodies get spacers too; other containers render their own way. */
+export function isSpacedContainer(type: string): boolean {
+  return CALLOUT_OPEN.test(type)
+}
+
+interface Scope {
+  level: number
+  /** Line after the previous block in this scope; null before the first block. */
+  lastEnd: number | null
+  close?: string
+  /** Callout bodies: the closing `:::` line, which spaces like a block. */
+  closeLine?: number
+  /**
+   * Callout paragraphs have no margins standing in for the first blank line,
+   * so every blank line there is a spacer; top-level runs drop one.
+   */
+  free: number
+}
+
+function blockEnd(token: BlockToken, lines: readonly string[]): number {
+  const [start, mapEnd] = token.map!
+  let end = mapEnd
+  // markdown-it-container ends its map on the closing `:::` line itself.
+  if (token.type.startsWith('container_') && CONTAINER_FENCE.test(lines[end] ?? '')) end += 1
+  // Lists and quotes swallow one trailing blank line.
+  while (end > start + 1 && !(lines[end - 1] ?? '').trim()) end -= 1
+  return end
+}
+
+/** Inserts `tn-blank-line` spacers for the blank lines `visual` keeps. */
+export function insertBlankLineSpacers(
+  state: CoreState,
+  spaced: (type: string) => boolean = isSpacedContainer
+): void {
+  const lines = state.src.split('\n')
+  const out: BlockToken[] = []
+  const stack: Scope[] = [{ level: 0, lastEnd: null, free: 1 }]
+  const pushSpacers = (count: number, level: number): void => {
+    for (; count > 0; count -= 1) {
+      const spacer = new state.Token('html_block', '', 0)
+      spacer.block = true
+      spacer.level = level
+      spacer.content = BLANK_LINE_HTML
+      out.push(spacer)
+    }
+  }
+  for (const token of state.tokens) {
+    const scope = stack[stack.length - 1]!
+    if (scope.close && token.type === scope.close && token.level === scope.level - 1) {
+      if (scope.closeLine !== undefined && scope.lastEnd !== null) {
+        pushSpacers(scope.closeLine - scope.lastEnd - scope.free, scope.level)
+      }
+      stack.pop()
+      out.push(token)
+      continue
+    }
+    if (token.block && token.map && token.nesting !== -1 && token.level === scope.level) {
+      if (scope.lastEnd !== null) {
+        pushSpacers(token.map[0] - scope.lastEnd - scope.free, scope.level)
+      }
+      const end = blockEnd(token, lines)
+      scope.lastEnd = end
+      out.push(token)
+      if (token.nesting === 1 && spaced(token.type)) {
+        // The title line spaces like a block, so does a closing fence.
+        const closed = CONTAINER_FENCE.test(lines[end - 1] ?? '') && end - 1 > token.map[0]
+        stack.push({
+          level: token.level + 1,
+          lastEnd: token.map[0] + 1,
+          close: token.type.replace(/_open$/, '_close'),
+          closeLine: closed ? end - 1 : undefined,
+          free: 0
+        })
+      }
+      continue
+    }
+    out.push(token)
+  }
+  state.tokens = out
+}
+
+/** Applies the mode to a markdown-it instance; `commonmark` leaves it untouched. */
+export function useLineBreaks(md: MarkdownLike, mode: LineBreakMode): void {
+  if (mode !== 'visual') return
+  md.set({ breaks: true })
+  md.core.ruler.push('tn_blank_lines', (state) => insertBlankLineSpacers(state))
+}

package/src/styles/prose.css

@@ -14,6 +14,32 @@
   margin: 16px 0;
   line-height: var(--tn-prose-line-height);
 }
+/* Visual line breaks: each blank line beyond the first adds one editor line.
+   The first spacer cancels the preceding block's 16px margin so N spacers add
+   exactly N line heights on top of the normal paragraph gap. */
+:is(.tn-prose, .vp-doc) :where(.tn-blank-line) {
+  height: var(--tn-prose-line-height);
+  margin: 0;
+}
+:is(.tn-prose, .vp-doc) :where(:not(.tn-blank-line) + .tn-blank-line) {
+  margin-top: -16px;
+}
+/* Callout bodies keep every blank line as a spacer, so the spacer replaces the
+   neighbouring blocks' own margins instead of adding to them. */
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block > .tn-blank-line) {
+  margin-top: 0;
+}
+:is(.tn-prose, .vp-doc) .tn-custom-block > .tn-blank-line + *,
+:is(.tn-prose, .vp-doc) .tn-custom-block > .tn-blank-line + * > :first-child,
+:is(.tn-prose, .vp-doc) .tn-custom-block > .tn-blank-line + * > :first-child > :first-child {
+  margin-top: 0;
+}
+/* Inner margins collapse out through the block (nested lists, quoted paragraphs). */
+:is(.tn-prose, .vp-doc) .tn-custom-block > :has(+ .tn-blank-line),
+:is(.tn-prose, .vp-doc) .tn-custom-block > :has(+ .tn-blank-line) > :last-child,
+:is(.tn-prose, .vp-doc) .tn-custom-block > :has(+ .tn-blank-line) > :last-child > :last-child {
+  margin-bottom: 0;
+}
 :is(.tn-prose, .vp-doc) :where(h1, h2, h3, h4, h5, h6) {
   font-family: var(--tn-font-sans);
   font-weight: var(--tn-heading-weight);
@@ -57,17 +83,17 @@
   color: var(--tn-c-link);
   text-decoration: none;
 }
-:is(.tn-prose, .vp-doc) :where(ul, ol) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(ul, ol) {
   padding-left: 1.5rem;
   margin: 16px 0;
 }
-:is(.tn-prose, .vp-doc) :where(li) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(li) {
   line-height: var(--tn-prose-line-height);
 }
-:is(.tn-prose, .vp-doc) :where(li::marker) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(li::marker) {
   color: var(--tn-c-text);
 }
-:is(.tn-prose, .vp-doc) :where(li > ul, li > ol) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(li > ul, li > ol) {
   margin: 0;
 }
 /* 任务列表复选框：对齐语雀的方框（16px / 圆角 4px / 选中填充品牌绿 + 白色对勾 /
@@ -75,10 +101,10 @@
    `appearance: none` 自绘；同时去掉 `.task-list-item` 的项目符号，避免出现
    「◦ ☐ 文本」两层符号。对勾用 data-URI 而不是 `::after`：`input` 是替换元素，
    Firefox 不生成伪元素。 */
-:is(.tn-prose, .vp-doc) :where(.task-list-item) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(.task-list-item) {
   list-style: none;
 }
-:is(.tn-prose, .vp-doc) :where(.task-list-item-checkbox) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(.task-list-item-checkbox) {
   appearance: none;
   -webkit-appearance: none;
   box-sizing: border-box;
@@ -97,15 +123,15 @@
   transition: all 0.3s;
   cursor: pointer;
 }
-:is(.tn-prose, .vp-doc) :where(.task-list-item-checkbox:hover) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(.task-list-item-checkbox:hover) {
   border-color: var(--tn-c-task-check);
 }
-:is(.tn-prose, .vp-doc) :where(.task-list-item-checkbox:checked) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(.task-list-item-checkbox:checked) {
   border-color: var(--tn-c-task-check);
   background-color: var(--tn-c-task-check);
   background-size: 12px 12px;
 }
-:is(.tn-prose, .vp-doc) :where(:not(pre) > code) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(:not(pre) > code) {
   color: inherit;
   background: var(--tn-c-inline-code-bg);
   border: 1px solid var(--tn-c-inline-code-border);
@@ -116,19 +142,19 @@
   font-size: 1em;
   font-weight: 400;
 }
-:is(.tn-prose, .vp-doc) :where(mark) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(mark) {
   color: inherit;
   background: var(--tn-c-mark-bg);
   border-radius: 2px;
   padding: 0 2px;
 }
-:is(.tn-prose, .vp-doc) :where(blockquote) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(blockquote) {
   margin: 16px 0;
   border-left: 2px solid var(--tn-c-divider);
   padding: 0 0 0 16px;
   color: var(--tn-c-text-2);
 }
-:is(.tn-prose, .vp-doc) :where(table) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(table) {
   border-collapse: collapse;
   margin: 16px 0;
   /* 铺满内容列：与 Desk 可视化编辑器里的表格宽度一致（编辑器里表格宽度 = 内容列宽）。
@@ -137,13 +163,13 @@
   width: 100%;
   max-width: 100%;
 }
-:is(.tn-prose, .vp-doc) :where(th, td) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(th, td) {
   border: 1px solid var(--tn-c-divider);
   padding: 8px 16px;
   font-size: 14px;
   line-height: 24px;
 }
-:is(.tn-prose, .vp-doc) :where(th) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(th) {
   font-weight: 600;
   background: var(--tn-c-bg-soft);
   /* 表头默认左对齐：浏览器对 <th> 的 UA 默认是居中，而编辑器里 Milkdown 给单元格写了
@@ -152,11 +178,11 @@
      因此显式对齐不受影响（实测保留 left / center / right）。 */
   text-align: left;
 }
-:is(.tn-prose, .vp-doc) :where(td p, th p) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(td p, th p) {
   margin: 0;
   line-height: 24px;
 }
-:is(.tn-prose, .vp-doc) :where(hr) {
+:is(.tn-prose, .vp-doc, .cm-lp-card .tn-custom-block) :where(hr) {
   margin: 16px 0;
   border: 0;
   border-top: 1px solid var(--tn-c-divider);
@@ -209,37 +235,67 @@
   text-align: center;
 }
 
-/* Callouts — same soft-tint cards as Desk visual (no left accent bar). */
+/* Callouts — GitHub Alerts：左侧色条 + 图标/标题，正文与周围连续，没有整块底色。 */
 :is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block) {
+  --tn-alert: var(--tn-c-text-2);
   box-sizing: border-box;
   margin: 16px 0;
-  padding: 12px 16px;
-  border: 1px solid transparent;
-  border-radius: 8px;
+  padding: 2px 0 2px 16px;
+  border: none;
+  border-left: 0.25em solid var(--tn-alert);
+  border-radius: 0;
+  background: none;
   color: var(--tn-c-text);
   font-size: inherit;
   line-height: 1.5;
 }
 :is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.tip) {
-  background-color: var(--tn-c-highlight);
+  --tn-alert: var(--tn-c-success);
 }
-:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.info),
-:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.note),
-:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.details) {
-  background-color: var(--tn-c-hover);
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.info) {
+  --tn-alert: var(--tn-c-link);
 }
 :is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.warning) {
-  background-color: var(--tn-c-warning-soft);
+  --tn-alert: var(--tn-c-warning);
 }
 :is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.danger) {
-  background-color: var(--tn-c-danger-soft);
+  --tn-alert: var(--tn-c-danger);
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.details) {
+  --tn-alert: var(--tn-c-text-2);
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-alert-icon) {
+  display: inline-flex;
+  flex: none;
+  color: var(--tn-alert);
+  line-height: 0;
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-alert-icon svg) {
+  width: 16px;
+  height: 16px;
+  display: block;
 }
 :is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block-title) {
-  margin: 0 0 2px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 4px;
   font-size: inherit;
   font-weight: 600;
   line-height: 1.5;
+  color: var(--tn-alert);
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-container-source) {
+  margin: 8px 0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: var(--tn-c-bg-soft);
   color: var(--tn-c-text);
+  font-family: var(--tn-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-x: auto;
 }
 :is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block > p:not(.tn-custom-block-title)) {
   margin: 0;
@@ -251,6 +307,7 @@
   margin-bottom: 0;
 }
 :is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block > summary) {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -268,7 +325,57 @@
   :where(details.tn-custom-block > summary::-webkit-details-marker) {
   display: none;
 }
-:is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block > summary::before) {
+/* 折叠折线和标题折叠一样挂在色条左外侧（悬停或收起时显示），图标和标题留在其它提示块的位置。
+   right 要越过 details 的左内边距 16px 和 0.25em 色条。 */
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block > summary > .tn-details-fold) {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: calc(100% + 16px + 0.25em);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  border-radius: 4px;
+  color: var(--tn-c-text-2);
+  line-height: 0;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card)
+  :where(details.tn-custom-block > summary:hover > .tn-details-fold) {
+  color: var(--tn-c-brand);
+  background: var(--tn-c-hover);
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card)
+  :where(
+    details.tn-custom-block:not([open]) > summary > .tn-details-fold,
+    details.tn-custom-block:hover > summary > .tn-details-fold,
+    details.tn-custom-block > summary:focus-visible > .tn-details-fold
+  ) {
+  opacity: 1;
+}
+@media (hover: none) {
+  :is(.tn-prose, .vp-doc, .cm-lp-card)
+    :where(details.tn-custom-block > summary > .tn-details-fold) {
+    opacity: 1;
+  }
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card)
+  :where(details.tn-custom-block > summary > .tn-details-fold svg) {
+  width: 12px;
+  height: 12px;
+  transform: none;
+  transform-origin: 50% 50%;
+  transition: transform 120ms ease;
+}
+:is(.tn-prose, .vp-doc, .cm-lp-card)
+  :where(details.tn-custom-block[open] > summary > .tn-details-fold svg) {
+  transform: rotate(90deg);
+}
+/* 旧版无 SVG 的 summary（缓存页等）仍用 CSS 折线，避免裸标题 */
+:is(.tn-prose, .vp-doc, .cm-lp-card)
+  :where(details.tn-custom-block > summary:not(:has(.tn-details-fold))::before) {
   content: '';
   flex: none;
   box-sizing: border-box;
@@ -282,7 +389,8 @@
   transform-origin: 50% 50%;
   transition: transform 120ms ease;
 }
-:is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block[open] > summary::before) {
+:is(.tn-prose, .vp-doc, .cm-lp-card)
+  :where(details.tn-custom-block[open] > summary:not(:has(.tn-details-fold))::before) {
   margin-top: -0.05em;
   transform: rotate(45deg);
 }

package/src/swiper/hydrate.ts

@@ -61,7 +61,10 @@ const READY = 'tnSwiperReady'
  * already-hydrated roots are skipped via `data-tn-swiper-ready`.
  * When `root` itself is a `.tn-swiper`, it is included.
  */
-export function hydrateTnSwipers(root: ParentNode = document): number {
+export function hydrateTnSwipers(
+  root: ParentNode = document,
+  options?: { activeIndex?: number; onActivate?: (index: number) => void }
+): number {
   const hosts: HTMLElement[] = []
   if (root instanceof HTMLElement && root.classList.contains('tn-swiper')) {
     hosts.push(root)
@@ -74,7 +77,7 @@ export function hydrateTnSwipers(root: ParentNode = document): number {
     if (seen.has(host)) continue
     seen.add(host)
     if (host.dataset[READY] === 'true') continue
-    if (hydrateOne(host)) {
+    if (hydrateOne(host, options)) {
       host.dataset[READY] = 'true'
       count += 1
     }
@@ -82,7 +85,10 @@ export function hydrateTnSwipers(root: ParentNode = document): number {
   return count
 }
 
-function hydrateOne(host: HTMLElement): boolean {
+function hydrateOne(
+  host: HTMLElement,
+  options?: { activeIndex?: number; onActivate?: (index: number) => void }
+): boolean {
   if (host.classList.contains('is-empty')) return true
   const tabs = host.querySelector<HTMLElement>('.tn-swiper-tabs')
   const wrapper = host.querySelector<HTMLElement>('.swiper-wrapper')
@@ -117,6 +123,7 @@ function hydrateOne(host: HTMLElement): boolean {
       slide.classList.toggle('is-active', on)
       slide.hidden = !on
     })
+    options?.onActivate?.(index)
   }
 
   const activeIndex = (): number => {
@@ -156,6 +163,10 @@ function hydrateOne(host: HTMLElement): boolean {
     tabsEl.remove()
   }
 
-  activate(0)
+  const start = Math.min(
+    Math.max(0, options?.activeIndex ?? 0),
+    Math.max(0, slides.length - 1)
+  )
+  activate(start)
   return true
 }