@design.estate/dees-catalog 3.90.1 → 3.92.0

package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -8,18 +8,31 @@ import {
   property,
   state,
   cssManager,
+  unsafeHTML,
 } from '@design.estate/dees-element';
-import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import { syntaxPaletteStyles, syntaxScopeStyles } from '../../00syntax.js';
 
 import type { HLJSApi } from 'highlight.js';
 
 import * as smartstring from '@push.rocks/smartstring';
 
-import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
 import '../../00group-layout/dees-tile/dees-tile.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import {
+  buildSplitRows,
+  computeLineDiff,
+  diffStats,
+  foldContextRows,
+  parseUnifiedDiff,
+  toUnifiedDiff,
+  type IDiffRow,
+  type IDiffSegment,
+  type ISplitCell,
+  type TDiffDisplayRow,
+} from './codebox.diff.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -35,244 +48,693 @@ export class DeesDataviewCodebox extends DeesElement {
   @property()
   accessor progLang: string = 'typescript';
 
-  @property({
-    type: String,
-    reflect: true,
-  })
+  /** Shown centered in the title bar; empty hides the title. */
+  @property()
+  accessor filename: string = '';
+
+  @property({ type: String })
   accessor codeToDisplay: string = '';
 
+  /**
+   * Diff mode inputs: set `codeBefore` (compared against `codeToDisplay` as
+   * the after state) OR a pre-computed `unifiedDiff` patch. Either activates
+   * diff rendering; `diffView` picks the layout and can force diff mode on
+   * its own (e.g. new-file diffs where `codeBefore` is empty).
+   */
+  @property({ type: String })
+  accessor codeBefore: string = '';
+
+  @property({ type: String })
+  accessor unifiedDiff: string = '';
+
+  /** '' = regular code view; 'inline' = unified rows; 'split' = side by side */
+  @property({ type: String })
+  accessor diffView: '' | 'inline' | 'split' = '';
+
+  @state()
+  accessor highlightedCode: string = '';
+
+  @state()
+  accessor copied: boolean = false;
+
+  @state()
+  accessor expandedFolds: ReadonlySet<number> = new Set<number>();
+
+  @state()
+  accessor highlightVersion: number = 0;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
-  ];
+    css`
+      :host {
+        position: relative;
+        display: block;
+        text-align: left;
+        font-family: var(--dees-font-family);
+        box-sizing: border-box;
+      }
 
-  constructor() {
-    super();
-  }
+      dees-tile {
+        height: 100%;
+        color: var(--dees-color-text-primary);
+      }
 
-  render(): TemplateResult {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        :host {
-          position: relative;
-          display: block;
-          text-align: left;
-          font-size: 16px;
-          /* syntax palette (dark defaults, gobright overrides below) */
-          --codebox-syntax-green: #10b981;
-          --codebox-syntax-purple: #a78bfa;
-          --codebox-syntax-cyan: #06b6d4;
-          --codebox-syntax-orange: #fb923c;
-          font-family: ${cssGeistFontFamily};
-          box-sizing: border-box;
-        }
+      /* --- Title bar --- */
+      .appbar {
+        height: var(--dees-control-height-sm);
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        align-items: center;
+        padding: 0 var(--dees-spacing-sm) 0 var(--dees-spacing-lg);
+      }
 
-        :host([gobright]) {
-          --codebox-syntax-green: #059669;
-          --codebox-syntax-purple: #8b5cf6;
-          --codebox-syntax-cyan: #0891b2;
-          --codebox-syntax-orange: #ea580c;
-        }
-        dees-tile {
-          color: var(--dees-color-text-primary);
-        }
+      .appbar .fileName {
+        grid-column: 2;
+        font-size: var(--dees-font-control-size-sm);
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 
-        .appbar {
-          color: var(--dees-color-text-muted);
-          height: 32px;
-          display: flex;
-          font-size: 13px;
-          line-height: 32px;
-          justify-content: center;
-          align-items: center;
-          padding: 0 16px;
-        }
+      .appbar .actions {
+        grid-column: 3;
+        display: flex;
+        justify-content: flex-end;
+      }
 
-        .appbar .fileName {
-          line-height: inherit;
-          position: relative;
-          flex: 1;
-          text-align: center;
-        }
+      .copyButton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: var(--dees-radius-sm);
+        color: var(--dees-color-text-muted);
+        cursor: pointer;
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
+      }
 
-        .bottomBar {
-          color: var(--dees-color-text-muted);
-          height: 28px;
-          font-size: 11px;
-          line-height: 28px;
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-          padding: 0 16px;
-          width: 100%;
-          box-sizing: border-box;
-        }
+      .copyButton:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
+      }
 
-        .spacesLabel {
-          padding: 0 16px;
-          display: flex;
-          align-items: center;
-        }
+      .copyButton:active {
+        background: var(--dees-color-active);
+      }
 
-        .languageLabel {
-          color: var(--dees-color-accent-primary);
-          font-size: 12px;
-          line-height: 28px;
-          background: color-mix(in srgb, var(--dees-color-accent-primary) 10%, transparent);
-          padding: 0px 16px;
-          font-weight: 500;
-          display: flex;
-          align-items: center;
-        }
+      .copyButton.copied {
+        color: var(--dees-color-text-success);
+      }
 
-        .hljs-keyword {
-          color: var(--dees-color-text-error);
-        }
+      /* --- Code area --- */
+      .codegrid {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+      }
 
-        .codegrid {
-          display: grid;
-          grid-template-columns: 50px auto;
-          overflow: auto;
-        }
+      .lineNumbers {
+        padding: var(--dees-spacing-lg) var(--dees-spacing-md) var(--dees-spacing-lg) var(--dees-spacing-lg);
+        text-align: right;
+        color: var(--dees-color-text-muted);
+        border-right: 1px solid var(--dees-color-border-subtle);
+        user-select: none;
+        min-width: 24px;
+      }
 
-        .lineNumbers {
-          color: var(--dees-color-text-muted);
-          padding: 24px 16px 0px 0px;
-          text-align: right;
-          border-right: 1px solid var(--dees-color-border-default);
-        }
+      pre {
+        margin: 0;
+        padding: var(--dees-spacing-lg) var(--dees-spacing-xl);
+        overflow-x: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
 
-        .lineCounter:last-child {
-          opacity: 50%;
-        }
+      code {
+        padding: 0;
+        margin: 0;
+        color: var(--dees-color-text-primary);
+      }
 
-        pre {
-          overflow-x: auto;
-          margin: 0px;
-          padding: 24px 24px;
-        }
+      code,
+      code *,
+      .lineNumbers {
+        font-family: var(--dees-font-family-mono);
+        font-size: var(--dees-font-control-size-sm);
+        font-weight: 400;
+        line-height: 1.6;
+      }
 
-        code {
-          font-weight: 400;
-          padding: 0px;
-          margin: 0px;
-        }
+      /* --- Bottom bar --- */
+      .bottomBar {
+        height: 28px;
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: 0 var(--dees-spacing-md) 0 var(--dees-spacing-lg);
+        font-size: var(--dees-font-caption2-size);
+        color: var(--dees-color-text-muted);
+        box-sizing: border-box;
+      }
 
-        code,
-        code *,
-        .lineNumbers {
-          line-height: 1.4em;
-          font-weight: 200;
-          font-family: ${cssMonoFontFamily};
-        }
+      .lineCount {
+        margin-right: auto;
+        font-weight: 500;
+      }
 
-        .hljs-string {
-          color: var(--codebox-syntax-green);
-        }
+      .languageLabel {
+        font-size: var(--dees-font-caption2-size);
+        font-weight: 500;
+        color: var(--dees-color-accent-primary);
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 12%, transparent);
+        padding: 2px 8px;
+        border-radius: var(--dees-radius-full);
+      }
 
-        .hljs-built_in {
-          color: var(--codebox-syntax-purple);
-        }
+    `,
+    /* Shared system syntax palette + highlight.js scope mapping */
+    syntaxPaletteStyles,
+    syntaxScopeStyles,
+    // --- Diff rendering ---
+    css`
+      :host {
+        --codebox-diff-add-bg: color-mix(in srgb, var(--dees-color-accent-success) 14%, transparent);
+        --codebox-diff-add-intra: color-mix(in srgb, var(--dees-color-accent-success) 34%, transparent);
+        --codebox-diff-remove-bg: color-mix(in srgb, var(--dees-color-accent-error) 13%, transparent);
+        --codebox-diff-remove-intra: color-mix(in srgb, var(--dees-color-accent-error) 32%, transparent);
+      }
 
-        .hljs-function {
-          color: var(--dees-color-link);
-        }
+      .diffScroll {
+        overflow-x: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+        padding: var(--dees-spacing-sm) 0;
+      }
 
-        .hljs-params {
-          color: var(--codebox-syntax-cyan);
-        }
+      .diffGrid {
+        display: grid;
+        min-width: max-content;
+        width: 100%;
+      }
 
-        .hljs-comment {
-          color: var(--dees-color-text-muted);
-        }
+      .diffGrid.inline {
+        grid-template-columns: minmax(3ch, auto) minmax(3ch, auto) 2ch minmax(0, 1fr);
+      }
 
-        .hljs-number {
-          color: var(--codebox-syntax-orange);
-        }
+      .diffGrid.split {
+        grid-template-columns: minmax(3ch, auto) 2ch minmax(24ch, 1fr) minmax(3ch, auto) 2ch minmax(24ch, 1fr);
+      }
 
-        .hljs-literal {
-          color: var(--dees-color-text-error);
-        }
+      .diffGrid > div {
+        font-family: var(--dees-font-family-mono);
+        font-size: var(--dees-font-control-size-sm);
+        line-height: 1.6;
+        white-space: pre;
+      }
 
-        .hljs-attr {
-          color: var(--codebox-syntax-purple);
-        }
+      .diffNum {
+        padding: 0 var(--dees-spacing-sm);
+        text-align: right;
+        color: var(--dees-color-text-muted);
+        user-select: none;
+      }
 
-        .hljs-variable {
-          color: var(--dees-color-text-primary);
-        }
-      </style>
+      .diffSign {
+        text-align: center;
+        user-select: none;
+        color: var(--dees-color-text-muted);
+      }
+
+      .diffText {
+        padding-right: var(--dees-spacing-lg);
+      }
+
+      .diffGrid .row-add {
+        background: var(--codebox-diff-add-bg);
+      }
+
+      .diffGrid .row-add.diffSign {
+        color: var(--dees-color-accent-success);
+        font-weight: 600;
+      }
+
+      .diffGrid .row-remove {
+        background: var(--codebox-diff-remove-bg);
+      }
+
+      .diffGrid .row-remove.diffSign {
+        color: var(--dees-color-accent-error);
+        font-weight: 600;
+      }
+
+      .diffGrid .row-filler {
+        background: color-mix(in srgb, var(--dees-color-text-muted) 5%, transparent);
+      }
+
+      .intra-add {
+        background: var(--codebox-diff-add-intra);
+        border-radius: 2px;
+      }
+
+      .intra-remove {
+        background: var(--codebox-diff-remove-intra);
+        border-radius: 2px;
+      }
+
+      .diffHunk {
+        grid-column: 1 / -1;
+        padding: 2px var(--dees-spacing-lg);
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption2-size);
+        user-select: none;
+      }
+
+      .diffFold {
+        grid-column: 1 / -1;
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: 2px var(--dees-spacing-lg);
+        border: 0;
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 7%, transparent);
+        color: var(--dees-color-link);
+        cursor: pointer;
+        font-family: var(--dees-font-family-mono);
+        font-size: var(--dees-font-caption1-size, 11px);
+        text-align: left;
+      }
+
+      .diffFold:hover {
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 13%, transparent);
+        color: var(--dees-color-link-hover);
+      }
+
+      .diffSplitSep {
+        border-left: 1px solid var(--dees-color-border-subtle);
+      }
+
+      .diffStat {
+        font-weight: 600;
+      }
+
+      .diffStat.added {
+        color: var(--dees-color-accent-success);
+      }
+
+      .diffStat.removed {
+        color: var(--dees-color-accent-error);
+      }
+    `,
+  ];
+
+  render(): TemplateResult {
+    const contextMenuOptions = [
+      {
+        name: 'Copy Code',
+        iconName: 'lucide:Copy',
+        action: async () => {
+          await this.copyCode();
+        },
+      },
+      ...(this.isDiffActive
+        ? [{
+            name: 'Copy Unified Diff',
+            iconName: 'lucide:GitCompareArrows',
+            action: async () => {
+              await this.copyUnifiedDiff();
+            },
+          }]
+        : []),
+    ];
+    return html`
       <dees-tile
         @contextmenu="${(eventArg: MouseEvent) => {
-          DeesContextmenu.openContextMenuWithOptions(eventArg, [
-            {
-              name: 'About',
-              iconName: 'circleInfo',
-              action: async () => {
-                return null;
-              },
-            },
-          ]);
+          DeesContextmenu.openContextMenuWithOptions(eventArg, contextMenuOptions);
         }}"
       >
         <div slot="header" class="appbar">
-          <div class="fileName">index.ts</div>
-        </div>
-        <div class="codegrid">
-          <div class="lineNumbers">
-            ${(() => {
-              let lineCounter = 0;
-              return this.codeToDisplay.split('\n').map((lineArg) => {
-                lineCounter++;
-                return html`<div class="lineCounter">${lineCounter}</div>`;
-              });
-            })()}
+          <div class="fileName">${this.filename}</div>
+          <div class="actions">
+            <div
+              class="copyButton ${this.copied ? 'copied' : ''}"
+              title="Copy code"
+              @click=${this.copyCode}
+            >
+              <dees-icon .icon=${this.copied ? 'lucide:Check' : 'lucide:Copy'} iconSize="14"></dees-icon>
+            </div>
           </div>
-          <pre><code></code></pre>
         </div>
+        ${this.isDiffActive ? this.renderDiff() : this.renderCode()}
         <div slot="footer" class="bottomBar">
-          <div class="spacesLabel">Spaces: 2</div>
+          ${this.isDiffActive ? this.renderDiffFooter() : this.renderCodeFooter()}
           <div class="languageLabel">${this.progLang}</div>
         </div>
       </dees-tile>
     `;
   }
 
-  private codeToDisplayStore = '';
+  private renderCode(): TemplateResult {
+    const codeLines = this.processedCode ? this.processedCode.split('\n') : [];
+    return html`
+      <div class="codegrid">
+        <div class="lineNumbers">
+          ${codeLines.map((_, index) => html`<div class="lineCounter">${index + 1}</div>`)}
+        </div>
+        <pre><code>${this.highlightedCode
+          ? unsafeHTML(this.highlightedCode)
+          : this.processedCode}</code></pre>
+      </div>
+    `;
+  }
+
+  private renderCodeFooter(): TemplateResult {
+    const codeLines = this.processedCode ? this.processedCode.split('\n') : [];
+    return html`<div class="lineCount">${codeLines.length} ${codeLines.length === 1 ? 'line' : 'lines'}</div>`;
+  }
+
+  private renderDiffFooter(): TemplateResult {
+    const stats = diffStats(this.diffRows);
+    return html`
+      <div class="lineCount">
+        <span class="diffStat added">+${stats.added}</span>
+        <span class="diffStat removed">−${stats.removed}</span>
+      </div>
+    `;
+  }
+
+  private renderDiff(): TemplateResult {
+    const displayRows = this.displayRowsWithFolds();
+    return html`
+      <div class="diffScroll">
+        ${this.effectiveDiffView === 'split'
+          ? this.renderSplitGrid(displayRows)
+          : this.renderInlineGrid(displayRows)}
+      </div>
+    `;
+  }
+
+  private renderInlineGrid(displayRows: TDiffDisplayRow[]): TemplateResult {
+    return html`
+      <div class="diffGrid inline">
+        ${displayRows.map((displayRow) => {
+          if (displayRow.kind === 'fold') {
+            return this.renderFoldRow(displayRow.rows.length, displayRow.ordinal ?? 0);
+          }
+          if (displayRow.kind === 'hunk') {
+            return html`<div class="diffHunk">${displayRow.text}</div>`;
+          }
+          const rowClass = displayRow.kind === 'add' ? 'row-add' : displayRow.kind === 'remove' ? 'row-remove' : '';
+          return html`
+            <div class="diffNum ${rowClass}">${displayRow.oldLine ?? ''}</div>
+            <div class="diffNum ${rowClass}">${displayRow.newLine ?? ''}</div>
+            <div class="diffSign ${rowClass}">${displayRow.kind === 'add' ? '+' : displayRow.kind === 'remove' ? '−' : ''}</div>
+            <div class="diffText ${rowClass}">${this.renderDiffLine(displayRow.text, displayRow.segments, displayRow.kind)}</div>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  private renderSplitGrid(displayRows: TDiffDisplayRow[]): TemplateResult {
+    // pair each contiguous non-fold run; folds render as full-width rows
+    const rendered: TemplateResult[] = [];
+    let run: IDiffRow[] = [];
+    const flushRun = () => {
+      for (const splitRow of buildSplitRows(run)) {
+        if (splitRow.kind === 'hunk') {
+          rendered.push(html`<div class="diffHunk">${splitRow.text}</div>`);
+        } else {
+          rendered.push(html`
+            ${this.renderSplitCell(splitRow.left, 'left')}
+            ${this.renderSplitCell(splitRow.right, 'right')}
+          `);
+        }
+      }
+      run = [];
+    };
+    for (const displayRow of displayRows) {
+      if (displayRow.kind === 'fold') {
+        flushRun();
+        rendered.push(this.renderFoldRow(displayRow.rows.length, displayRow.ordinal ?? 0));
+      } else {
+        run.push(displayRow);
+      }
+    }
+    flushRun();
+    return html`<div class="diffGrid split">${rendered}</div>`;
+  }
+
+  private renderSplitCell(cell: ISplitCell | undefined, side: 'left' | 'right'): TemplateResult {
+    const separatorClass = side === 'right' ? 'diffSplitSep' : '';
+    if (!cell) {
+      return html`
+        <div class="diffNum row-filler ${separatorClass}"></div>
+        <div class="diffSign row-filler"></div>
+        <div class="diffText row-filler"></div>
+      `;
+    }
+    const rowClass = cell.kind === 'add' ? 'row-add' : cell.kind === 'remove' ? 'row-remove' : '';
+    return html`
+      <div class="diffNum ${rowClass} ${separatorClass}">${cell.line || ''}</div>
+      <div class="diffSign ${rowClass}">${cell.kind === 'add' ? '+' : cell.kind === 'remove' ? '−' : ''}</div>
+      <div class="diffText ${rowClass}">${this.renderDiffLine(cell.text, cell.segments, cell.kind)}</div>
+    `;
+  }
+
+  private renderFoldRow(hiddenCount: number, foldOrdinal: number): TemplateResult {
+    return html`
+      <button
+        class="diffFold"
+        type="button"
+        @click=${() => {
+          const expanded = new Set(this.expandedFolds);
+          expanded.add(foldOrdinal);
+          this.expandedFolds = expanded;
+        }}
+      >
+        <dees-icon icon="lucide:UnfoldVertical" iconSize="12"></dees-icon>
+        ${hiddenCount} unchanged ${hiddenCount === 1 ? 'line' : 'lines'}
+      </button>
+    `;
+  }
+
+  private renderDiffLine(
+    text: string,
+    segments: IDiffSegment[] | undefined,
+    kind: 'context' | 'add' | 'remove',
+  ): TemplateResult {
+    if (segments?.length) {
+      const intraClass = kind === 'add' ? 'intra-add' : 'intra-remove';
+      return html`${segments.map((segment) =>
+        segment.changed ? html`<span class=${intraClass}>${segment.text}</span>` : segment.text,
+      )}`;
+    }
+    const highlighted = this.diffHighlightCache.get(text);
+    return highlighted ? html`${unsafeHTML(highlighted)}` : html`${text || ' '}`;
+  }
+
+  private processedCode = '';
   private highlightJs: HLJSApi | null = null;
+  private highlightToken = 0;
+  private copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
+  private diffRows: IDiffRow[] = [];
+  private diffHighlightCache = new Map<string, string>();
+
+  /** Diff mode is active when a diff input or an explicit diffView is set. */
+  public get isDiffActive(): boolean {
+    return Boolean(this.unifiedDiff || this.codeBefore || this.diffView);
+  }
+
+  public get effectiveDiffView(): 'inline' | 'split' {
+    return this.diffView === 'split' ? 'split' : 'inline';
+  }
 
-  public async updated(_changedProperties: Map<string, any>) {
-    super.updated(_changedProperties);
-    console.log('highlighting now');
-    console.log(this.childNodes);
-    const slottedCodeNodes: Text[] = [];
-    this.childNodes.forEach((childNode) => {
-      if (childNode.nodeName === '#text') {
-        slottedCodeNodes.push(childNode as Text);
+  public willUpdate(changedProperties: Map<string, any>) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has('codeToDisplay')) {
+      this.processedCode = this.codeToDisplay
+        ? smartstring.indent.normalize(this.codeToDisplay).trim()
+        : '';
+      // drop the stale highlight so the new code renders plain until re-highlighted
+      this.highlightedCode = '';
+    }
+    if (
+      changedProperties.has('codeToDisplay')
+      || changedProperties.has('codeBefore')
+      || changedProperties.has('unifiedDiff')
+      || changedProperties.has('diffView')
+    ) {
+      if (this.isDiffActive) {
+        this.diffRows = this.unifiedDiff
+          ? parseUnifiedDiff(this.unifiedDiff)
+          : computeLineDiff(this.codeBefore, this.codeToDisplay);
+      } else {
+        this.diffRows = [];
       }
-    });
-    if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
-      this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
+      this.diffHighlightCache.clear();
+      this.expandedFolds = new Set<number>();
     }
-    if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
-      this.codeToDisplayStore = smartstring.indent
-        .normalize(slottedCodeNodes[0].wholeText)
-        .trimStart();
-      this.codeToDisplay = this.codeToDisplayStore;
+    // language switch invalidates cached per-line highlights
+    if (changedProperties.has('progLang')) {
+      this.diffHighlightCache.clear();
     }
-    await domtools.plugins.smartdelay.delayFor(0);
+  }
+
+  private displayRowsWithFolds(): TDiffDisplayRow[] {
+    const folded = foldContextRows(this.diffRows);
+    const result: TDiffDisplayRow[] = [];
+    let foldOrdinal = 0;
+    for (const row of folded) {
+      if (row.kind === 'fold') {
+        if (this.expandedFolds.has(foldOrdinal)) {
+          result.push(...row.rows);
+        } else {
+          result.push({ ...row, ordinal: foldOrdinal });
+        }
+        foldOrdinal++;
+      } else {
+        result.push(row);
+      }
+    }
+    return result;
+  }
 
-    // Load highlight.js from CDN if not already loaded
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    // adopt slotted text content as code source once (regular mode only)
+    if (!this.codeToDisplay && !this.isDiffActive) {
+      const slottedText = Array.from(this.childNodes).find(
+        (childNode) => childNode.nodeName === '#text' && (childNode as Text).wholeText.trim(),
+      ) as Text | undefined;
+      if (slottedText) {
+        this.codeToDisplay = slottedText.wholeText;
+        return;
+      }
+    }
+    if (this.isDiffActive) {
+      if (
+        changedProperties.has('codeToDisplay')
+        || changedProperties.has('codeBefore')
+        || changedProperties.has('unifiedDiff')
+        || changedProperties.has('diffView')
+        || changedProperties.has('expandedFolds')
+        || changedProperties.has('progLang')
+      ) {
+        await this.highlightDiffLines();
+      }
+      return;
+    }
+    if (changedProperties.has('codeToDisplay') || changedProperties.has('progLang')) {
+      await this.highlightCode();
+    }
+  }
+
+  /**
+   * Highlights visible diff lines per-line (full-text highlighting cannot be
+   * split across rows because hljs spans may cross line boundaries). Results
+   * are cached by line text; intraline-segmented rows skip highlighting —
+   * their change tint carries the information.
+   */
+  private async highlightDiffLines() {
+    const token = ++this.highlightToken;
     if (!this.highlightJs) {
       this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs();
     }
+    if (token !== this.highlightToken) return;
+    const pendingLines = new Set<string>();
+    for (const displayRow of this.displayRowsWithFolds()) {
+      if (displayRow.kind === 'fold' || displayRow.kind === 'hunk') continue;
+      if (displayRow.segments?.length) continue;
+      if (displayRow.text && !this.diffHighlightCache.has(displayRow.text)) {
+        pendingLines.add(displayRow.text);
+      }
+    }
+    if (!pendingLines.size) return;
+    for (const line of pendingLines) {
+      try {
+        this.diffHighlightCache.set(
+          line,
+          this.highlightJs.highlight(line, { language: this.progLang, ignoreIllegals: true }).value,
+        );
+      } catch {
+        this.diffHighlightCache.set(line, '');
+      }
+    }
+    if (token === this.highlightToken) {
+      this.highlightVersion++;
+    }
+  }
 
-    const localCodeNode = this.shadowRoot!.querySelector('code');
-    const highlightedHtml = this.highlightJs.highlight(this.codeToDisplayStore, {
-      language: this.progLang,
-      ignoreIllegals: true,
+  private async highlightCode() {
+    if (!this.processedCode) {
+      return;
+    }
+    const token = ++this.highlightToken;
+    if (!this.highlightJs) {
+      this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs();
+    }
+    if (token !== this.highlightToken) {
+      return;
+    }
+    try {
+      this.highlightedCode = this.highlightJs.highlight(this.processedCode, {
+        language: this.progLang,
+        ignoreIllegals: true,
+      }).value;
+    } catch (error) {
+      // unknown language — keep the plain-text rendering
+      console.warn(`dees-dataview-codebox: could not highlight as '${this.progLang}'`, error);
+    }
+  }
+
+  private copyCode = async () => {
+    // in diff mode the copy button yields the after-state text
+    const textToCopy = this.isDiffActive
+      ? this.diffRows
+          .filter((row) => row.kind === 'context' || row.kind === 'add')
+          .map((row) => row.text)
+          .join('\n')
+      : this.processedCode;
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+    } catch (error) {
+      console.error('dees-dataview-codebox: copy failed', error);
+      return;
+    }
+    this.copied = true;
+    if (this.copiedResetTimeout) {
+      clearTimeout(this.copiedResetTimeout);
+    }
+    this.copiedResetTimeout = setTimeout(() => {
+      this.copied = false;
+      this.copiedResetTimeout = null;
+    }, 1500);
+  };
+
+  private copyUnifiedDiff = async () => {
+    const patch = this.unifiedDiff || toUnifiedDiff(this.diffRows, {
+      fileNameBefore: this.filename ? `a/${this.filename}` : undefined,
+      fileNameAfter: this.filename ? `b/${this.filename}` : undefined,
     });
-    localCodeNode!.innerHTML = highlightedHtml.value;
+    try {
+      await navigator.clipboard.writeText(patch);
+    } catch (error) {
+      console.error('dees-dataview-codebox: copy unified diff failed', error);
+    }
+  };
+
+  public async disconnectedCallback() {
+    if (this.copiedResetTimeout) {
+      clearTimeout(this.copiedResetTimeout);
+      this.copiedResetTimeout = null;
+    }
+    await super.disconnectedCallback();
   }
 }