@design.estate/dees-catalog 3.91.0 → 3.93.0

package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.d.ts

@@ -1,5 +1,6 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 import '../../00group-layout/dees-tile/dees-tile.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 declare global {
     interface HTMLElementTagNameMap {
         'dees-dataview-codebox': DeesDataviewCodebox;
@@ -9,11 +10,55 @@ export declare class DeesDataviewCodebox extends DeesElement {
     static demo: () => TemplateResult<1>;
     static demoGroups: string[];
     accessor progLang: string;
+    /** Shown centered in the title bar; empty hides the title. */
+    accessor filename: 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).
+     */
+    accessor codeBefore: string;
+    accessor unifiedDiff: string;
+    /** '' = regular code view; 'inline' = unified rows; 'split' = side by side */
+    accessor diffView: '' | 'inline' | 'split';
+    accessor highlightedCode: string;
+    accessor copied: boolean;
+    accessor expandedFolds: ReadonlySet<number>;
+    accessor highlightVersion: number;
     static styles: import("@design.estate/dees-element").CSSResult[];
-    constructor();
     render(): TemplateResult;
-    private codeToDisplayStore;
+    private renderCode;
+    private renderCodeFooter;
+    private renderDiffFooter;
+    private renderDiff;
+    private renderInlineGrid;
+    private renderSplitGrid;
+    private renderSplitCell;
+    private renderFoldRow;
+    private renderDiffLine;
+    private processedCode;
     private highlightJs;
-    updated(_changedProperties: Map<string, any>): Promise<void>;
+    private highlightToken;
+    private copiedResetTimeout;
+    private diffRows;
+    private diffHighlightCache;
+    /** Diff mode is active when a diff input or an explicit diffView is set. */
+    get isDiffActive(): boolean;
+    get effectiveDiffView(): 'inline' | 'split';
+    willUpdate(changedProperties: Map<string, any>): void;
+    private displayRowsWithFolds;
+    updated(changedProperties: Map<string, any>): Promise<void>;
+    /**
+     * 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 highlightDiffLines;
+    private highlightCode;
+    private copyCode;
+    private copyUnifiedDiff;
+    disconnectedCallback(): Promise<void>;
 }

package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.demo.js

@@ -1,4 +1,79 @@
 import { html, cssManager } from '@design.estate/dees-element';
+// Passed via property binding: slotted text cannot carry generics like
+// Promise<User[]> — the HTML parser reads the angle brackets as a tag and
+// truncates the text node.
+const typescriptSample = `interface User {
+  id: number;
+  name: string;
+  email: string;
+  isActive: boolean;
+}
+
+class UserService {
+  private users: User[] = [];
+
+  constructor(private apiUrl: string) {
+    console.log('UserService initialized');
+  }
+
+  async getUsers(): Promise<User[]> {
+    try {
+      const response = await fetch(this.apiUrl);
+      const data = await response.json();
+      return data.users;
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      return [];
+    }
+  }
+
+  addUser(user: User): void {
+    this.users.push(user);
+  }
+}
+
+// Usage example
+const service = new UserService('https://api.example.com/users');
+const users = await service.getUsers();
+console.log('Found users:', users.length);`;
+const diffBefore = `export const greet = (name: string) => {
+  const greeting = 'Hello ' + name;
+  console.log(greeting);
+  return greeting;
+};
+
+export const farewell = (name: string) => {
+  return 'Goodbye ' + name;
+};
+
+const unusedHelper = () => {
+  return 42;
+};`;
+const diffAfter = `export const greet = (name: string, excited = false) => {
+  const greeting = \`Hello \${name}\${excited ? '!' : ''}\`;
+  console.log(greeting);
+  return greeting;
+};
+
+export const farewell = (name: string) => {
+  return 'Goodbye ' + name;
+};
+
+export const wave = () => {
+  return '👋';
+};`;
+const longBefore = Array.from({ length: 60 }, (_, i) => `line ${i + 1}: stable content`).join('\n');
+const longAfter = longBefore.replace('line 30: stable content', 'line 30: CHANGED content');
+const unifiedPatchSample = `--- a/src/config.ts
++++ b/src/config.ts
+@@ -1,6 +1,7 @@
+ export const config = {
+-  retries: 3,
++  retries: 5,
++  timeoutMs: 30_000,
+   verbose: false,
+ };
+`;
 export const demoFunc = () => html `
   <style>
     .demoWrapper {
@@ -36,42 +111,11 @@ export const demoFunc = () => html `
     <div class="section">
       <div class="section-title">TypeScript Code Example</div>
       <div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
-      <dees-dataview-codebox proglang="typescript">
-interface User {
-  id: number;
-  name: string;
-  email: string;
-  isActive: boolean;
-}
-
-class UserService {
-  private users: User[] = [];
-  
-  constructor(private apiUrl: string) {
-    console.log('UserService initialized');
-  }
-  
-  async getUsers(): Promise<User[]> {
-    try {
-      const response = await fetch(this.apiUrl);
-      const data = await response.json();
-      return data.users;
-    } catch (error) {
-      console.error('Failed to fetch users:', error);
-      return [];
-    }
-  }
-  
-  addUser(user: User): void {
-    this.users.push(user);
-  }
-}
-
-// Usage example
-const service = new UserService('https://api.example.com/users');
-const users = await service.getUsers();
-console.log('Found users:', users.length);
-      </dees-dataview-codebox>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="user.service.ts"
+        .codeToDisplay=${typescriptSample}
+      ></dees-dataview-codebox>
     </div>
     
     <div class="section">
@@ -95,7 +139,7 @@ const fetchData = async (url) => {
 
 // Modern syntax
 const greet = (name = 'World') => \`Hello, \${name}!\`;
-console.log(greet('ShadCN'));
+console.log(greet('design.estate'));
       </dees-dataview-codebox>
     </div>
     
@@ -175,7 +219,7 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
     <div class="section">
       <div class="section-title">JSON Example</div>
       <div class="section-description">JSON configuration with proper formatting.</div>
-      <dees-dataview-codebox proglang="json">
+      <dees-dataview-codebox proglang="json" filename="package.json">
 {
   "name": "@design.estate/dees-catalog",
   "version": "1.10.7",
@@ -194,6 +238,51 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
 }
       </dees-dataview-codebox>
     </div>
+    <div class="section">
+      <div class="section-title">Inline Diff</div>
+      <div class="section-description">Line diff computed from before/after code with intraline change tint and context folding.</div>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="greeter.ts"
+        diffView="inline"
+        .codeBefore=${diffBefore}
+        .codeToDisplay=${diffAfter}
+      ></dees-dataview-codebox>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Side-by-Side Diff</div>
+      <div class="section-description">The same change rendered split: before on the left, after on the right, filler rows keep hunks aligned.</div>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="greeter.ts"
+        diffView="split"
+        .codeBefore=${diffBefore}
+        .codeToDisplay=${diffAfter}
+      ></dees-dataview-codebox>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Diff With Folded Context</div>
+      <div class="section-description">Unchanged runs collapse to expandable folds so long files read like a review diff.</div>
+      <dees-dataview-codebox
+        proglang="plaintext"
+        filename="big-file.txt"
+        diffView="inline"
+        .codeBefore=${longBefore}
+        .codeToDisplay=${longAfter}
+      ></dees-dataview-codebox>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Unified Patch Input</div>
+      <div class="section-description">Pre-computed unified diffs render directly, hunk headers included.</div>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="config.ts"
+        .unifiedDiff=${unifiedPatchSample}
+      ></dees-dataview-codebox>
+    </div>
   </div>
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1kYXRhdmlldy1jb2RlYm94LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1kYXRhdmlldy9kZWVzLWRhdGF2aWV3LWNvZGVib3gvZGVlcy1kYXRhdmlldy1jb2RlYm94LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUUvRCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7OztvQkFRZCxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7ZUFnQjdDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7ZUFLeEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQXVLdEQsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1kYXRhdmlldy1jb2RlYm94LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1kYXRhdmlldy9kZWVzLWRhdGF2aWV3LWNvZGVib3gvZGVlcy1kYXRhdmlldy1jb2RlYm94LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUUvRCx1RUFBdUU7QUFDdkUsMEVBQTBFO0FBQzFFLDJCQUEyQjtBQUMzQixNQUFNLGdCQUFnQixHQUFHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7MkNBaUNrQixDQUFDO0FBRTVDLE1BQU0sVUFBVSxHQUFHOzs7Ozs7Ozs7Ozs7R0FZaEIsQ0FBQztBQUVKLE1BQU0sU0FBUyxHQUFHOzs7Ozs7Ozs7Ozs7R0FZZixDQUFDO0FBRUosTUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7QUFDcEcsTUFBTSxTQUFTLEdBQUcsVUFBVSxDQUFDLE9BQU8sQ0FBQyx5QkFBeUIsRUFBRSwwQkFBMEIsQ0FBQyxDQUFDO0FBRTVGLE1BQU0sa0JBQWtCLEdBQUc7Ozs7Ozs7OztDQVMxQixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7b0JBUWQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7O2VBZ0I3QyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7O2VBS3hDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7Ozs7Ozs7eUJBVzlCLGdCQUFnQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBbUluQixVQUFVO3lCQUNQLFNBQVM7Ozs7Ozs7Ozs7O3NCQVdaLFVBQVU7eUJBQ1AsU0FBUzs7Ozs7Ozs7Ozs7c0JBV1osVUFBVTt5QkFDUCxTQUFTOzs7Ozs7Ozs7O3VCQVVYLGtCQUFrQjs7OztDQUl4QyxDQUFBIn0=