@sparkelf/dsh-plus 0.2.1-rc.2.4 → 0.2.2-alpha.2.2

package/patches/diagram-preview.patch

@@ -0,0 +1,562 @@
+diff --git a/packages/client/ui-sidebar-documentpreview/src/client/diagram/DiagramBody.module.css b/packages/client/ui-sidebar-documentpreview/src/client/diagram/DiagramBody.module.css
+new file mode 100644
+index 00000000..977969f6
+--- /dev/null
++++ b/packages/client/ui-sidebar-documentpreview/src/client/diagram/DiagramBody.module.css
+@@ -0,0 +1,53 @@
++/* Diagram canvas: scrollable surface with an absolutely positioned node layer. */
++
++.frame {
++  box-sizing: border-box;
++  width: 100%;
++  height: 100%;
++  overflow: auto;
++  padding: 16px;
++  font-family: var(--dsw-font, sans-serif);
++}
++
++.canvas {
++  position: relative;
++}
++
++.edges {
++  position: absolute;
++  inset: 0;
++  overflow: visible;
++}
++
++.edge {
++  fill: none;
++  stroke: var(--dsw-color-border, #c8ccd4);
++  stroke-width: 1.5;
++}
++
++.node {
++  position: absolute;
++  display: flex;
++  align-items: center;
++  box-sizing: border-box;
++  padding: 6px 10px;
++  border: 1px solid var(--dsw-color-border, #c8ccd4);
++  border-radius: 6px;
++  background: var(--dsw-color-surface, #ffffff);
++}
++
++.label {
++  display: -webkit-box;
++  -webkit-box-orient: vertical;
++  -webkit-line-clamp: 2;
++  overflow: hidden;
++  font-size: 12px;
++  line-height: 1.35;
++  overflow-wrap: anywhere;
++}
++
++.failure {
++  padding: 16px;
++  color: var(--dsw-color-text-secondary, #6b7280);
++  font-size: 13px;
++}
+diff --git a/packages/client/ui-sidebar-documentpreview/src/client/diagram/DiagramBody.tsx b/packages/client/ui-sidebar-documentpreview/src/client/diagram/DiagramBody.tsx
+new file mode 100644
+index 00000000..e43d6b17
+--- /dev/null
++++ b/packages/client/ui-sidebar-documentpreview/src/client/diagram/DiagramBody.tsx
+@@ -0,0 +1,116 @@
++/** Diagram body: draw.io XML and XMind archives rendered as boxes and routed links. */
++import { useMemo, type ReactNode } from 'react'
++import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
++import type { DocumentPreviewProps } from '../document/contract.ts'
++import { LoadingIndicator } from '../LoadingIndicator.tsx'
++import { parseDrawio, parseXmind, type Diagram } from './parse.ts'
++import { edgePath, layoutDiagram, NODE_HEIGHT, NODE_WIDTH } from './layout.ts'
++import type {} from './locales.ts'
++import css from './DiagramBody.module.css'
++
++/** Standard document props plus the diagram dictionary. */
++export type DiagramBodyProps = DocumentPreviewProps & PropsLocale<'documentDiagram'> & {
++  /** Which format this tab carries, decided from the file suffix by the registering module. */
++  readonly format: DiagramFormat
++}
++
++/** The diagram formats this body understands. */
++export type DiagramFormat = 'drawio' | 'xmind'
++
++/**
++ * Decode the file bytes as UTF-8 text.
++ * @param data - the document bytes.
++ * @returns the decoded text.
++ */
++function decode(data: Uint8Array<ArrayBuffer>): string {
++  return new TextDecoder('utf-8').decode(data)
++}
++
++/**
++ * Read the `content.json` member out of an XMind zip.
++ *
++ * An XMind file is a zip whose first entry is that JSON. Only the entry is needed, so the local
++ * file header is walked directly rather than inflating the whole archive.
++ * @param data - the document bytes.
++ * @returns the decoded JSON text.
++ */
++function readXmindContent(data: Uint8Array<ArrayBuffer>): string {
++  const view = new DataView(data.buffer, data.byteOffset, data.byteLength)
++  let offset = 0
++  while (offset + 30 <= data.byteLength) {
++    // A local file header is 30 bytes, then the name, then the stored data.
++    const signature = view.getUint32(offset, true)
++    if (signature !== 0x04034b50) break
++    const nameLength = view.getUint16(offset + 26, true)
++    const extraLength = view.getUint16(offset + 28, true)
++    const start = offset + 30 + nameLength + extraLength
++    const name = decode(data.subarray(offset + 30, offset + 30 + nameLength))
++    if (name === 'content.json') {
++      const method = view.getUint16(offset + 8, true)
++      const compressedSize = view.getUint32(offset + 18, true)
++      const raw = data.subarray(start, start + compressedSize)
++      if (method !== 0) throw new Error('compressed XMind entry')
++      return decode(raw)
++    }
++    offset = start + view.getUint32(offset + 18, true)
++  }
++  throw new Error('XMind archive has no content.json')
++}
++
++/**
++ * Parse whichever format this body was registered for.
++ * @param format - the registered format.
++ * @param data - the document bytes.
++ * @returns the parsed diagram.
++ */
++function parse(format: DiagramFormat, data: Uint8Array<ArrayBuffer>): Diagram {
++  const text = decode(data)
++  if (format === 'xmind') return parseXmind(readXmindContent(data))
++  // A draw.io file exported with compression carries base64 in a `<diagram>` element.
++  return parseDrawio(text)
++}
++
++/**
++ * Render a parsed diagram.
++ * @param props - standard document props plus this renderer’s dictionary and format.
++ * @returns the diagram canvas, or the loading indicator while content is absent.
++ */
++export function DiagramBody({ content, format, t }: DiagramBodyProps): ReactNode {
++  const data = content.kind === 'bytes' ? content.data : undefined
++  const parsed = useMemo(() => {
++    if (data === undefined) return undefined
++    try {
++      return { diagram: layoutDiagram(parse(format, data)) }
++    } catch {
++      return { failed: true as const }
++    }
++  }, [data, format])
++
++  if (data === undefined) return <LoadingIndicator label={t('loading')} />
++  if (parsed === undefined || 'failed' in parsed) return <div className={css.failure}>{t('failed')}</div>
++
++  const { diagram } = parsed
++  if (diagram.placements.length === 0) return <div className={css.failure}>{t('empty')}</div>
++  const at = new Map(diagram.placements.map(item => [item.node.id, item]))
++
++  return (
++    <div className={css.frame} data-diagram-preview>
++      <div className={css.canvas} style={{ width: diagram.width, height: diagram.height }}>
++        <svg className={css.edges} width={diagram.width} height={diagram.height} aria-hidden>
++          {diagram.edges.map((edge, index) => {
++            const from = at.get(edge.from)
++            const to = at.get(edge.to)
++            if (from === undefined || to === undefined) return undefined
++            return <path key={index} className={css.edge} d={edgePath(from, to)} />
++          })}
++        </svg>
++        {diagram.placements.map(({ node, x, y }) => (
++          <div key={node.id} className={css.node} style={{ left: x, top: y, width: NODE_WIDTH, height: NODE_HEIGHT }}
++            title={node.label}>
++            <span className={css.label}>{node.label}</span>
++          </div>
++        ))}
++      </div>
++    </div>
++  )
++}
+diff --git a/packages/client/ui-sidebar-documentpreview/src/client/diagram/index.ts b/packages/client/ui-sidebar-documentpreview/src/client/diagram/index.ts
+new file mode 100644
+index 00000000..9daef7da
+--- /dev/null
++++ b/packages/client/ui-sidebar-documentpreview/src/client/diagram/index.ts
+@@ -0,0 +1,52 @@
++/** Builtin diagram metadata and keyed body registration; assembly belongs to the package entry. */
++import type { Context } from '@deepseek-ai/cordis'
++import type {} from '../index.ts'
++import type { DocumentPreviewDefinition } from '../document/registry.ts'
++import { DiagramBody, type DiagramFormat } from './DiagramBody.tsx'
++import { en, zh } from './locales.ts'
++
++/** draw.io implementation identity, shared by metadata and the keyed slot. */
++export const DRAWIO_BODY_ID = '@deepseek-ai/dsh-client-ui-sidebar-documentpreview/drawio'
++
++/** XMind implementation identity, shared by metadata and the keyed slot. */
++export const XMIND_BODY_ID = '@deepseek-ai/dsh-client-ui-sidebar-documentpreview/xmind'
++
++/** File suffixes rendered by the draw.io body. */
++export const DRAWIO_EXTENSIONS = ['drawio', 'dio'] as const
++
++/** File suffixes rendered by the XMind body. */
++export const XMIND_EXTENSIONS = ['xmind'] as const
++
++/**
++ * Describe one diagram renderer independently from its keyed body slot.
++ * @param id - implementation identity.
++ * @param extensions - recognized file suffixes.
++ * @param title - locale-owned implementation name.
++ * @returns metadata for complete diagram files.
++ */
++function diagramDefinition(id: string, extensions: readonly string[], title: () => string): DocumentPreviewDefinition {
++  return { id, extensions, priority: 'builtin', title, loading: 'bytes-complete', wrap: false }
++}
++
++/**
++ * Register the diagram dictionary, both format metadata entries, and their keyed bodies.
++ *
++ * The two formats share one body and one dictionary: the only difference is the parser the body
++ * selects, which the registration supplies as a prop.
++ * @param ctx - owning plugin context.
++ */
++export function apply(ctx: Context): void {
++  const t = ctx.locale.bind('documentDiagram')
++  ctx.effect(() => ctx.locale.register('documentDiagram', { zh, en }))
++  const entries: readonly { readonly id: string; readonly extensions: readonly string[]; readonly format: DiagramFormat }[] = [
++    { id: DRAWIO_BODY_ID, extensions: DRAWIO_EXTENSIONS, format: 'drawio' },
++    { id: XMIND_BODY_ID, extensions: XMIND_EXTENSIONS, format: 'xmind' },
++  ]
++  for (const entry of entries) {
++    ctx.effect(() => ctx.documentPreviews.register(diagramDefinition(entry.id, entry.extensions, () => t('title'))))
++    ctx.effect(() => ctx.slots.inject('sidebar.right.tab.document', () => ctx.slots.register(
++      { name: 'sidebar.right.tab.document', key: entry.id, locale: 'documentDiagram', inject: () => ({ format: entry.format }) },
++      DiagramBody,
++    )))
++  }
++}
+diff --git a/packages/client/ui-sidebar-documentpreview/src/client/diagram/layout.ts b/packages/client/ui-sidebar-documentpreview/src/client/diagram/layout.ts
+new file mode 100644
+index 00000000..98cad9f3
+--- /dev/null
++++ b/packages/client/ui-sidebar-documentpreview/src/client/diagram/layout.ts
+@@ -0,0 +1,123 @@
++/**
++ * Lay out a parsed diagram as positioned boxes and orthogonal links.
++ *
++ * MXGraph and XMind both describe a graph, not a picture, so the renderer needs coordinates. The
++ * two arrangements a reader expects are laid out here: a mind map fans out to the right, one depth
++ * per column, and a general graph keeps document order in rows. Both then route each edge as a
++ * three-segment path between box borders, which stays readable without a routing library.
++ */
++import type { Diagram, DiagramEdge, DiagramNode } from './parse.ts'
++
++/** Box size in CSS pixels, matching the card the renderer draws. */
++export const NODE_WIDTH = 200
++
++/** Vertical distance between the tops of neighbouring boxes. */
++export const NODE_HEIGHT = 48
++
++/** Horizontal distance between successive columns. */
++const COLUMN_GAP = 96
++
++/** Vertical distance between rows in a wrapped graph. */
++const ROW_GAP = 28
++
++/** Boxes per row once a diagram stops being a tree. */
++const ROW_WIDTH = 4
++
++/** Where one node sits. */
++export interface Placement {
++  /** The node being placed. */
++  readonly node: DiagramNode
++  /** Left edge in diagram coordinates. */
++  readonly x: number
++  /** Top edge in diagram coordinates. */
++  readonly y: number
++}
++
++/** A diagram with coordinates and the canvas it needs. */
++export interface Layout {
++  /** Every node with its position. */
++  readonly placements: readonly Placement[]
++  /** Links between placed nodes. */
++  readonly edges: readonly DiagramEdge[]
++  /** Canvas width in diagram coordinates. */
++  readonly width: number
++  /** Canvas height in diagram coordinates. */
++  readonly height: number
++}
++
++/**
++ * Arrange nodes by their depth, one depth per column.
++ * @param nodes - nodes in document order.
++ * @returns each node with a column and a row inside that column.
++ */
++function byDepth(nodes: readonly DiagramNode[]): readonly Placement[] {
++  const rows = new Map<number, number>()
++  return nodes.map((node) => {
++    const row = rows.get(node.depth) ?? 0
++    rows.set(node.depth, row + 1)
++    return { node, x: node.depth * (NODE_WIDTH + COLUMN_GAP), y: row * (NODE_HEIGHT + ROW_GAP) }
++  })
++}
++
++/**
++ * Arrange nodes in document order, wrapped into rows.
++ * @param nodes - nodes in document order.
++ * @returns each node with a grid position.
++ */
++function byRow(nodes: readonly DiagramNode[]): readonly Placement[] {
++  return nodes.map((node, index) => ({
++    node,
++    x: (index % ROW_WIDTH) * (NODE_WIDTH + COLUMN_GAP),
++    y: Math.floor(index / ROW_WIDTH) * (NODE_HEIGHT + ROW_GAP),
++  }))
++}
++
++/**
++ * Place a parsed diagram.
++ * @param diagram - the parsed diagram.
++ * @returns coordinates plus the canvas size they need.
++ */
++export function layoutDiagram(diagram: Diagram): Layout {
++  const rooted = diagram.edges.length === 0 || diagram.nodes.every(node => node.depth > 0 || node.depth === 0)
++  // A converted mind map carries depth; a general graph does not, so it keeps document order.
++  const placements = rooted && diagram.nodes.some(node => node.depth > 0) ? byDepth(diagram.nodes) : byRow(diagram.nodes)
++  const width = Math.max(0, ...placements.map(item => item.x + NODE_WIDTH))
++  const height = Math.max(0, ...placements.map(item => item.y + NODE_HEIGHT))
++  const placed = new Set(placements.map(item => item.node.id))
++  return {
++    placements,
++    edges: diagram.edges.filter(edge => placed.has(edge.from) && placed.has(edge.to)),
++    width,
++    height,
++  }
++}
++
++/**
++ * Route one link as a path between the facing borders of its two boxes.
++ * @param from - source placement.
++ * @param to - target placement.
++ * @returns the SVG path data.
++ */
++export function edgePath(from: Placement, to: Placement): string {
++  const fromRight = from.x + NODE_WIDTH
++  const fromMiddle = from.y + NODE_HEIGHT / 2
++  const toMiddle = to.y + NODE_HEIGHT / 2
++  // A link that runs leftward leaves from the source’s left edge instead.
++  if (to.x >= fromRight) {
++    const middle = (fromRight + to.x) / 2
++    return 'M' + String(fromRight) + ',' + String(fromMiddle)
++      + ' H' + String(middle) + ' V' + String(toMiddle) + ' H' + String(to.x)
++  }
++  if (to.x + NODE_WIDTH <= from.x) {
++    const middle = (to.x + NODE_WIDTH + from.x) / 2
++    return 'M' + String(from.x) + ',' + String(fromMiddle)
++      + ' H' + String(middle) + ' V' + String(toMiddle) + ' H' + String(to.x + NODE_WIDTH)
++  }
++  const below = to.y >= from.y
++  const start = below ? from.y + NODE_HEIGHT : from.y
++  const end = below ? to.y : to.y + NODE_HEIGHT
++  const middle = (start + end) / 2
++  const centre = from.x + NODE_WIDTH / 2
++  return 'M' + String(centre) + ',' + String(start)
++    + ' V' + String(middle) + ' H' + String(to.x + NODE_WIDTH / 2) + ' V' + String(end)
++}
+diff --git a/packages/client/ui-sidebar-documentpreview/src/client/diagram/locales.ts b/packages/client/ui-sidebar-documentpreview/src/client/diagram/locales.ts
+new file mode 100644
+index 00000000..66914c11
+--- /dev/null
++++ b/packages/client/ui-sidebar-documentpreview/src/client/diagram/locales.ts
+@@ -0,0 +1,25 @@
++/** Locale-owned diagram implementation name and status text. */
++export const zh = {
++  title: '图表',
++  loading: '正在解析图表…',
++  failed: '无法解析这份图表文件。',
++  empty: '这份图表没有可渲染的节点。',
++} satisfies Record<string, string>
++
++/** Diagram renderer dictionary keys. */
++export type DiagramPreviewKey = keyof typeof zh
++
++/** English dictionary with the same keys as the Chinese dictionary. */
++export const en = {
++  title: 'Diagram',
++  loading: 'Parsing diagram…',
++  failed: 'This diagram file could not be parsed.',
++  empty: 'This diagram has no renderable nodes.',
++} satisfies Record<DiagramPreviewKey, string>
++
++declare module '@deepseek-ai/dsh-client-ui-slots' {
++  interface LocaleNamespaceMap {
++    /** Diagram renderer copy. */
++    documentDiagram: DiagramPreviewKey
++  }
++}
+diff --git a/packages/client/ui-sidebar-documentpreview/src/client/diagram/parse.ts b/packages/client/ui-sidebar-documentpreview/src/client/diagram/parse.ts
+new file mode 100644
+index 00000000..768b9a16
+--- /dev/null
++++ b/packages/client/ui-sidebar-documentpreview/src/client/diagram/parse.ts
+@@ -0,0 +1,139 @@
++/**
++ * Read the diagram formats this preview renders into one node and edge list.
++ *
++ * Two shapes arrive here. A draw.io file is mxGraph XML whose cells carry an id, an optional
++ * value, and a style that tells a vertex from an edge. An XMind file is a zip whose content.json
++ * holds a topic tree. Both reduce to labelled boxes and the links between them, which is what the
++ * renderer draws and what a reader wants from either format.
++ */
++
++/** One box or label in a diagram. */
++export interface DiagramNode {
++  /** Stable identity within the parsed document. */
++  readonly id: string
++  /** Visible text, unescaped and stripped of markup. */
++  readonly label: string
++  /** Nesting depth, so a parsed tree keeps its hierarchy visible. */
++  readonly depth: number
++}
++
++/** One link between two nodes. */
++export interface DiagramEdge {
++  /** Source node id. */
++  readonly from: string
++  /** Target node id. */
++  readonly to: string
++  /** Visible edge label, empty when the document carries none. */
++  readonly label: string
++}
++
++/** A parsed diagram, ready to draw. */
++export interface Diagram {
++  /** Nodes in document order. */
++  readonly nodes: readonly DiagramNode[]
++  /** Links whose endpoints both resolved. */
++  readonly edges: readonly DiagramEdge[]
++}
++
++/**
++ * Decode the entities mxGraph XML carries and drop any markup an embedded value holds.
++ * @param value - raw attribute text.
++ * @returns the visible label.
++ */
++export function plainLabel(value: string): string {
++  const decoded = value
++    .replaceAll('&lt;', '<')
++    .replaceAll('&gt;', '>')
++    .replaceAll('&quot;', '"')
++    .replaceAll('&apos;', "'")
++    .replaceAll('&#10;', ' ')
++    .replaceAll('&amp;', '&')
++  // A value may be HTML; the text between its tags is the label a reader recognizes.
++  return decoded.replace(/<[^>]*>/gu, ' ').replace(/\s+/gu, ' ').trim()
++}
++
++/**
++ * Read the attribute value of one start tag.
++ * @param tag - the start tag text.
++ * @param name - attribute name.
++ * @returns the attribute value, or an empty string when absent.
++ */
++function attribute(tag: string, name: string): string {
++  const match = new RegExp(name + '="([^"]*)"', 'u').exec(tag)
++  return match?.[1] ?? ''
++}
++
++/**
++ * Parse an mxGraph document into nodes and edges.
++ * @param xml - the draw.io XML text.
++ * @returns the parsed diagram.
++ */
++export function parseDrawio(xml: string): Diagram {
++  const nodes: DiagramNode[] = []
++  const edges: DiagramEdge[] = []
++  const known = new Set<string>()
++  // Two passes: every vertex must exist before an edge can name both of its ends.
++  for (const tag of xml.match(/<mxCell\b[^>]*>/gu) ?? []) {
++    const id = attribute(tag, 'id')
++    const edge = attribute(tag, 'edge') === '1'
++    if (edge || id === '' || id === '0' || id === '1') continue
++    const label = plainLabel(attribute(tag, 'value'))
++    // A container cell with no text is structural, not a box a reader needs.
++    if (label === '') continue
++    known.add(id)
++    nodes.push({ id, label, depth: 0 })
++  }
++  for (const tag of xml.match(/<mxCell\b[^>]*>/gu) ?? []) {
++    if (attribute(tag, 'edge') !== '1') continue
++    const from = attribute(tag, 'source')
++    const to = attribute(tag, 'target')
++    if (!known.has(from) || !known.has(to)) continue
++    edges.push({ from, to, label: plainLabel(attribute(tag, 'value')) })
++  }
++  return { nodes, edges }
++}
++
++/** One topic as XMind stores it: a title and whatever is attached below. */
++interface XmindTopic {
++  readonly title?: string
++  readonly children?: { readonly attached?: readonly XmindTopic[] }
++}
++
++/**
++ * Flatten one level of topics, returning the ids of the nodes created for that level.
++ * @param topics - the topics at this level.
++ * @param depth - nesting level, used for the node indent.
++ * @param nodes - accumulator for nodes.
++ * @returns the ids created here, so the caller links only its own children.
++ */
++function walkTopics(topics: readonly XmindTopic[], depth: number, nodes: DiagramNode[], edges: DiagramEdge[]): readonly string[] {
++  const created: string[] = []
++  for (const topic of topics) {
++    const label = (topic.title ?? '').trim()
++    const id = 'n' + String(nodes.length)
++    // A topic with no text still parents its children, so it keeps an id without a node.
++    if (label !== '') {
++      nodes.push({ id, label, depth })
++      created.push(id)
++    }
++    const attached = topic.children?.attached ?? []
++    if (attached.length === 0) continue
++    const children = walkTopics(attached, depth + 1, nodes, edges)
++    for (const child of children) edges.push({ from: id, to: child, label: '' })
++  }
++  return created
++}
++/**
++ * Parse an XMind content.json document into nodes and edges.
++ * @param json - the decoded content.json text.
++ * @returns the parsed diagram.
++ */
++export function parseXmind(json: string): Diagram {
++  const sheets = JSON.parse(json) as readonly { readonly rootTopic?: XmindTopic }[]
++  const nodes: DiagramNode[] = []
++  const edges: DiagramEdge[] = []
++  for (const sheet of sheets) {
++    if (sheet.rootTopic !== undefined) walkTopics([sheet.rootTopic], 0, nodes, edges)
++  }
++  return { nodes, edges }
++}
+diff --git a/packages/client/ui-sidebar-documentpreview/src/client/index.ts b/packages/client/ui-sidebar-documentpreview/src/client/index.ts
+index 72a26771..94c11c51 100644
+--- a/packages/client/ui-sidebar-documentpreview/src/client/index.ts
++++ b/packages/client/ui-sidebar-documentpreview/src/client/index.ts
+@@ -36,6 +36,7 @@ import { apply as registerHtml } from './html/index.ts'
+ import { apply as registerImage } from './image/index.ts'
+ import { apply as registerPdf } from './pdf/index.ts'
+ import { apply as registerCode } from './code/index.ts'
++import { apply as registerDiagram } from './diagram/index.ts'
+ import { apply as registerOffice } from './office/index.ts'
+ import { apply as registerExcel } from './excel/index.ts'
+ import { Config } from '../config.ts'
+@@ -127,4 +128,5 @@ export function apply(ctx: ClientContext): void {
+   registerOffice(ctx, config.office)
+   registerExcel(ctx, config.excel)
+   registerCode(ctx)
++  registerDiagram(ctx)
+ }