npm - @uibit/diff-viewer - Versions diffs - 0.1.0 - Mend

@uibit/diff-viewer 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/LICENSE +21 -0
package/README.md +25 -0
package/custom-elements.json +374 -0
package/dist/diff-viewer.d.ts +46 -0
package/dist/diff-viewer.d.ts.map +1 -0
package/dist/diff-viewer.js +163 -0
package/dist/diff-viewer.js.map +1 -0
package/dist/diff.d.ts +6 -0
package/dist/diff.d.ts.map +1 -0
package/dist/diff.js +39 -0
package/dist/diff.js.map +1 -0
package/dist/frameworks/angular/index.ts +27 -0
package/dist/frameworks/astro/index.d.ts +10 -0
package/dist/frameworks/nuxt/index.ts +7 -0
package/dist/frameworks/preact/index.d.ts +14 -0
package/dist/frameworks/qwik/index.tsx +10 -0
package/dist/frameworks/react/index.d.ts +18 -0
package/dist/frameworks/solid/index.d.ts +15 -0
package/dist/frameworks/stencil/index.d.ts +13 -0
package/dist/frameworks/svelte/index.svelte +36 -0
package/dist/frameworks/vue/index.ts +23 -0
package/dist/index.d.ts +4 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +3 -0
package/dist/index.js.map +1 -0
package/dist/styles.d.ts +2 -0
package/dist/styles.d.ts.map +1 -0
package/dist/styles.js +124 -0
package/dist/styles.js.map +1 -0
package/dist/types.d.ts +7 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +2 -0
package/dist/types.js.map +1 -0
package/package.json +88 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 UIBit Contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,25 @@
+# Diff Viewer
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/diff-viewer)
+Diff Viewer provides a comparison block for reviewing differences between two sets of text or code. It computes a line-level diff internally using the Longest Common Subsequence (LCS) algorithm, displaying additions and removals in a side-by-side (split) or inline format.
+## Value Delivery
+- **Clear Comparison** – Helps users quickly identify text insertions and deletions with standardized semantic color highlights.
+- **Flexible Layouts** – Supports split-pane side-by-side or inline unified layouts to accommodate different screen sizes and user preferences.
+- **Self-Contained Computation** – Performs diff calculations entirely client-side without relying on external libraries or server roundtrips.
+## Ideal Applications
+- **Version History** – Reviewing edits in collaborative documents or content management systems.
+- **Code Reviews** – Inline or split presentation of source code edits and patches.
+- **Configuration Audits** – Comparing system settings, configuration files, or data payloads.
+## Further Information
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+## Changelog
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json ADDED Viewed

@@ -0,0 +1,374 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/diff-viewer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Side-by-side or inline comparison block for two blocks of text or code.\nComputes a line-level diff internally using LCS — no external libraries needed.\nDeleted lines are highlighted red, inserted lines green, in the familiar\ncode-review style.\n\nSupply the two texts via the `old` and `new` properties (or `old-text` /\n`new-text` attributes for HTML usage). Switch between layouts with the\n`mode` attribute.",
+          "name": "DiffViewer",
+          "cssProperties": [
+            {
+              "description": "Code font stack",
+              "name": "--uibit-diff-viewer-font-family",
+              "default": "var(--uibit-font-mono)"
+            },
+            {
+              "description": "Font size",
+              "name": "--uibit-diff-viewer-font-size",
+              "default": "0.8125rem"
+            },
+            {
+              "description": "Line height",
+              "name": "--uibit-diff-viewer-line-height",
+              "default": "1.6"
+            },
+            {
+              "description": "Border and divider color",
+              "name": "--uibit-diff-viewer-border-color",
+              "default": "var(--uibit-border-color)"
+            },
+            {
+              "description": "Corner radius",
+              "name": "--uibit-diff-viewer-radius",
+              "default": "var(--uibit-radius-2xl)"
+            },
+            {
+              "description": "Header background",
+              "name": "--uibit-diff-viewer-header-bg",
+              "default": "var(--uibit-bg-subtle)"
+            },
+            {
+              "description": "Header label text color",
+              "name": "--uibit-diff-viewer-label-color",
+              "default": "var(--uibit-text-muted)"
+            },
+            {
+              "description": "Line-number gutter background",
+              "name": "--uibit-diff-viewer-gutter-bg",
+              "default": "var(--uibit-bg-subtle)"
+            },
+            {
+              "description": "Line-number gutter text color",
+              "name": "--uibit-diff-viewer-gutter-color",
+              "default": "var(--uibit-color-gray-400)"
+            },
+            {
+              "description": "Deleted-line background",
+              "name": "--uibit-diff-viewer-delete-bg",
+              "default": "#fef2f2"
+            },
+            {
+              "description": "Deleted-line text color",
+              "name": "--uibit-diff-viewer-delete-color",
+              "default": "#991b1b"
+            },
+            {
+              "description": "Deleted-line gutter background",
+              "name": "--uibit-diff-viewer-delete-gutter-bg",
+              "default": "#fee2e2"
+            },
+            {
+              "description": "Inserted-line background",
+              "name": "--uibit-diff-viewer-insert-bg",
+              "default": "#f0fdf4"
+            },
+            {
+              "description": "Inserted-line text color",
+              "name": "--uibit-diff-viewer-insert-color",
+              "default": "#166534"
+            },
+            {
+              "description": "Inserted-line gutter background",
+              "name": "--uibit-diff-viewer-insert-gutter-bg",
+              "default": "#dcfce7"
+            },
+            {
+              "description": "Unchanged-line text color",
+              "name": "--uibit-diff-viewer-equal-color",
+              "default": "var(--uibit-text-secondary)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "oldText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "newText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "'split' | 'inline'"
+              },
+              "default": "'split'",
+              "description": "Layout mode: 'split' shows two panes side by side, 'inline' shows a single unified view.",
+              "attribute": "mode",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "showLineNumbers",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show line numbers in the gutter.",
+              "attribute": "show-line-numbers"
+            },
+            {
+              "kind": "method",
+              "name": "_renderLine",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "'equal' | 'insert' | 'delete'"
+                  }
+                },
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "lineNum",
+                  "type": {
+                    "text": "number | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderSplit",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "ops",
+                  "type": {
+                    "text": "DiffOp[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderInline",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "ops",
+                  "type": {
+                    "text": "DiffOp[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleOldChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleNewChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "mode",
+              "type": {
+                "text": "'split' | 'inline'"
+              },
+              "default": "'split'",
+              "description": "Layout mode: 'split' shows two panes side by side, 'inline' shows a single unified view.",
+              "fieldName": "mode"
+            },
+            {
+              "name": "show-line-numbers",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show line numbers in the gutter.",
+              "fieldName": "showLineNumbers"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-diff-viewer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DiffViewer",
+          "declaration": {
+            "name": "DiffViewer",
+            "module": "src/diff-viewer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-diff-viewer",
+          "declaration": {
+            "name": "DiffViewer",
+            "module": "src/diff-viewer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DiffViewer",
+            "module": "src/diff-viewer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/diff.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "diffLines",
+          "return": {
+            "type": {
+              "text": "DiffOp[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "oldText",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "newText",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "diffLines",
+          "declaration": {
+            "name": "diffLines",
+            "module": "src/diff.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./diff-viewer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DiffViewer",
+          "declaration": {
+            "name": "DiffViewer",
+            "module": "./diff-viewer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DiffOp",
+          "declaration": {
+            "name": "DiffOp",
+            "module": "./diff"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { --uibit-diff-viewer-border-color: var(--uibit-border-color, var(--uibit-color-gray-200, #e5e7eb)); --uibit-diff-viewer-radius: var(--uibit-radius-2xl, 0.5rem); --uibit-diff-viewer-label-color: var(--uibit-text-muted, var(--uibit-color-gray-500, #6b7280)); --uibit-diff-viewer-gutter-color: var(--uibit-color-gray-400, #d1d5db); --uibit-diff-viewer-equal-color: var(--uibit-text-secondary, var(--uibit-color-gray-700, #374151)); display: block; font-family: var(--uibit-diff-viewer-font-family, var(--uibit-font-mono, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace)); font-size: var(--uibit-diff-viewer-font-size, var(--uibit-font-size-sm, calc(0.8125rem * var(--uibit-font-scale-factor, 1)))); line-height: var(--uibit-diff-viewer-line-height, var(--uibit-line-height-normal, 1.5)); border: 0.0625rem solid var(--uibit-diff-viewer-border-color); border-radius: var(--uibit-diff-viewer-radius); overflow: hidden; } .header { display: grid; border-bottom: 0.0625rem solid var(--uibit-diff-viewer-border-color); } :host([mode=\"split\"]) .header { grid-template-columns: 1fr 1fr; } :host([mode=\"inline\"]) .header { grid-template-columns: 1fr; } .header-cell { padding: calc(0.5rem * var(--uibit-spacing-factor, 1)) calc(1rem * var(--uibit-spacing-factor, 1)); font-size: var(--uibit-font-size-xs, calc(0.75rem * var(--uibit-font-scale-factor, 1))); font-weight: var(--uibit-font-weight-medium, 500); color: var(--uibit-diff-viewer-label-color, #6b7280); font-family: var(--uibit-diff-viewer-font-family, inherit); border-right: 0.0625rem solid var(--uibit-diff-viewer-border-color, #e5e7eb); } .header-cell:last-child { border-right: none; } .body { display: grid; overflow: auto; } :host([mode=\"split\"]) .body { grid-template-columns: 1fr 1fr; } :host([mode=\"inline\"]) .body { grid-template-columns: 1fr; } .pane { overflow: auto; border-right: 0.0625rem solid var(--uibit-diff-viewer-border-color, #e5e7eb); } .pane:last-child { border-right: none; } .line { display: flex; min-width: max-content; } .gutter { user-select: none; min-width: calc(3rem * var(--uibit-spacing-factor, 1)); padding: 0 calc(0.75rem * var(--uibit-spacing-factor, 1)); text-align: right; color: var(--uibit-diff-viewer-gutter-color, #d1d5db); border-right: 0.0625rem solid var(--uibit-diff-viewer-border-color, #e5e7eb); flex-shrink: 0; } .content { padding: 0 calc(1rem * var(--uibit-spacing-factor, 1)); white-space: pre; flex: 1; } .line.delete { background: rgba(239, 68, 68, 0.06); color: var(--uibit-diff-delete-color, #991b1b); } .line.delete .gutter { color: rgba(153, 27, 27, 0.4); } .line.insert { background: rgba(34, 197, 94, 0.06); color: var(--uibit-diff-insert-color, #166534); } .line.insert .gutter { color: rgba(22, 101, 52, 0.4); } .line.equal { background: transparent; color: var(--uibit-diff-viewer-equal-color, #374151); } .sign { display: inline-block; width: 1rem; margin-right: 0.25rem; flex-shrink: 0; opacity: 0.5; } .divider { width: 0.0625rem; background: var(--uibit-diff-viewer-border-color, #e5e7eb); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/diff-viewer.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { UIBitElement } from '@uibit/core';
+/**
+ * Side-by-side or inline comparison block for two blocks of text or code.
+ * Computes a line-level diff internally using LCS — no external libraries needed.
+ * Deleted lines are highlighted red, inserted lines green, in the familiar
+ * code-review style.
+ *
+ * Supply the two texts via the `old` and `new` properties (or `old-text` /
+ * `new-text` attributes for HTML usage). Switch between layouts with the
+ * `mode` attribute.
+ *
+ * @cssprop [--uibit-diff-viewer-font-family=var(--uibit-font-mono)] - Code font stack
+ * @cssprop [--uibit-diff-viewer-font-size=0.8125rem] - Font size
+ * @cssprop [--uibit-diff-viewer-line-height=1.6] - Line height
+ * @cssprop [--uibit-diff-viewer-border-color=var(--uibit-border-color)] - Border and divider color
+ * @cssprop [--uibit-diff-viewer-radius=var(--uibit-radius-2xl)] - Corner radius
+ * @cssprop [--uibit-diff-viewer-header-bg=var(--uibit-bg-subtle)] - Header background
+ * @cssprop [--uibit-diff-viewer-label-color=var(--uibit-text-muted)] - Header label text color
+ * @cssprop [--uibit-diff-viewer-gutter-bg=var(--uibit-bg-subtle)] - Line-number gutter background
+ * @cssprop [--uibit-diff-viewer-gutter-color=var(--uibit-color-gray-400)] - Line-number gutter text color
+ * @cssprop [--uibit-diff-viewer-delete-bg=#fef2f2] - Deleted-line background
+ * @cssprop [--uibit-diff-viewer-delete-color=#991b1b] - Deleted-line text color
+ * @cssprop [--uibit-diff-viewer-delete-gutter-bg=#fee2e2] - Deleted-line gutter background
+ * @cssprop [--uibit-diff-viewer-insert-bg=#f0fdf4] - Inserted-line background
+ * @cssprop [--uibit-diff-viewer-insert-color=#166534] - Inserted-line text color
+ * @cssprop [--uibit-diff-viewer-insert-gutter-bg=#dcfce7] - Inserted-line gutter background
+ * @cssprop [--uibit-diff-viewer-equal-color=var(--uibit-text-secondary)] - Unchanged-line text color
+ */
+export declare class DiffViewer extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    private oldText;
+    private newText;
+    /** Layout mode: 'split' shows two panes side by side, 'inline' shows a single unified view. */
+    mode: 'split' | 'inline';
+    connectedCallback(): void;
+    /** Show line numbers in the gutter. */
+    showLineNumbers: boolean;
+    private _renderLine;
+    private _renderSplit;
+    private _renderInline;
+    private _handleOldChange;
+    private _handleNewChange;
+    render(): import("lit").TemplateResult<1>;
+}
+export default DiffViewer;
+//# sourceMappingURL=diff-viewer.d.ts.map

package/dist/diff-viewer.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"diff-viewer.d.ts","sourceRoot":"","sources":["../src/diff-viewer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,OAAO,CAAM;IAE9B,+FAA+F;IAClE,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAW;IAEhE,iBAAiB,SAQhB;IAED,uCAAuC;IACsB,eAAe,UAAQ;IAEpF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAQxB,MAAM,oCAOL;CACF;eAEc,UAAU"}

package/dist/diff-viewer.js ADDED Viewed

@@ -0,0 +1,163 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { customElement, UIBitElement } from '@uibit/core';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+import { diffLines } from './diff';
+/**
+ * Side-by-side or inline comparison block for two blocks of text or code.
+ * Computes a line-level diff internally using LCS — no external libraries needed.
+ * Deleted lines are highlighted red, inserted lines green, in the familiar
+ * code-review style.
+ *
+ * Supply the two texts via the `old` and `new` properties (or `old-text` /
+ * `new-text` attributes for HTML usage). Switch between layouts with the
+ * `mode` attribute.
+ *
+ * @cssprop [--uibit-diff-viewer-font-family=var(--uibit-font-mono)] - Code font stack
+ * @cssprop [--uibit-diff-viewer-font-size=0.8125rem] - Font size
+ * @cssprop [--uibit-diff-viewer-line-height=1.6] - Line height
+ * @cssprop [--uibit-diff-viewer-border-color=var(--uibit-border-color)] - Border and divider color
+ * @cssprop [--uibit-diff-viewer-radius=var(--uibit-radius-2xl)] - Corner radius
+ * @cssprop [--uibit-diff-viewer-header-bg=var(--uibit-bg-subtle)] - Header background
+ * @cssprop [--uibit-diff-viewer-label-color=var(--uibit-text-muted)] - Header label text color
+ * @cssprop [--uibit-diff-viewer-gutter-bg=var(--uibit-bg-subtle)] - Line-number gutter background
+ * @cssprop [--uibit-diff-viewer-gutter-color=var(--uibit-color-gray-400)] - Line-number gutter text color
+ * @cssprop [--uibit-diff-viewer-delete-bg=#fef2f2] - Deleted-line background
+ * @cssprop [--uibit-diff-viewer-delete-color=#991b1b] - Deleted-line text color
+ * @cssprop [--uibit-diff-viewer-delete-gutter-bg=#fee2e2] - Deleted-line gutter background
+ * @cssprop [--uibit-diff-viewer-insert-bg=#f0fdf4] - Inserted-line background
+ * @cssprop [--uibit-diff-viewer-insert-color=#166534] - Inserted-line text color
+ * @cssprop [--uibit-diff-viewer-insert-gutter-bg=#dcfce7] - Inserted-line gutter background
+ * @cssprop [--uibit-diff-viewer-equal-color=var(--uibit-text-secondary)] - Unchanged-line text color
+ */
+let DiffViewer = class DiffViewer extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        this.oldText = '';
+        this.newText = '';
+        /** Layout mode: 'split' shows two panes side by side, 'inline' shows a single unified view. */
+        this.mode = 'split';
+        /** Show line numbers in the gutter. */
+        this.showLineNumbers = true;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'region');
+        }
+        if (!this.hasAttribute('aria-label')) {
+            this.setAttribute('aria-label', 'Text comparison');
+        }
+    }
+    _renderLine(type, text, lineNum) {
+        const sign = type === 'insert' ? '+' : type === 'delete' ? '-' : ' ';
+        return html `
+      <div class="line ${type}">
+        ${this.showLineNumbers
+            ? html `<span class="gutter">${lineNum ?? ''}</span>`
+            : nothing}
+        <span class="content"><span class="sign" aria-hidden="true">${sign}</span>${text}</span>
+      </div>
+    `;
+    }
+    _renderSplit(ops) {
+        let oldLine = 1;
+        let newLine = 1;
+        const leftLines = [];
+        const rightLines = [];
+        for (const op of ops) {
+            if (op.type === 'equal') {
+                leftLines.push(this._renderLine('equal', op.text, oldLine++));
+                rightLines.push(this._renderLine('equal', op.text, newLine++));
+            }
+            else if (op.type === 'delete') {
+                leftLines.push(this._renderLine('delete', op.text, oldLine++));
+                rightLines.push(html `<div class="line equal"><span class="gutter"></span><span class="content"></span></div>`);
+            }
+            else {
+                leftLines.push(html `<div class="line equal"><span class="gutter"></span><span class="content"></span></div>`);
+                rightLines.push(this._renderLine('insert', op.text, newLine++));
+            }
+        }
+        return html `
+      <div class="header">
+        <div class="header-cell"><slot name="old-label">Before</slot></div>
+        <div class="header-cell"><slot name="new-label">After</slot></div>
+      </div>
+      <div class="body">
+        <div class="pane">${leftLines}</div>
+        <div class="pane">${rightLines}</div>
+      </div>
+    `;
+    }
+    _renderInline(ops) {
+        let oldLine = 1;
+        let newLine = 1;
+        const lines = ops.map(op => {
+            if (op.type === 'equal') {
+                return this._renderLine('equal', op.text, oldLine++);
+            }
+            else if (op.type === 'delete') {
+                return this._renderLine('delete', op.text, oldLine++);
+            }
+            else {
+                return this._renderLine('insert', op.text, newLine++);
+            }
+        });
+        return html `
+      <div class="header">
+        <div class="header-cell"><slot name="old-label">Before</slot> → <slot name="new-label">After</slot></div>
+      </div>
+      <div class="body">
+        <div class="pane">${lines}</div>
+      </div>
+    `;
+    }
+    _handleOldChange(e) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        if (nodes.length > 0) {
+            this.oldText = nodes.map(n => n.textContent ?? '').join('');
+        }
+    }
+    _handleNewChange(e) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        if (nodes.length > 0) {
+            this.newText = nodes.map(n => n.textContent ?? '').join('');
+        }
+    }
+    render() {
+        const ops = diffLines(this.oldText, this.newText);
+        return html `
+      <slot name="old" @slotchange=${this._handleOldChange} style="display: none;"></slot>
+      <slot name="new" @slotchange=${this._handleNewChange} style="display: none;"></slot>
+      ${this.mode === 'split' ? this._renderSplit(ops) : this._renderInline(ops)}
+    `;
+    }
+};
+__decorate([
+    state()
+], DiffViewer.prototype, "oldText", void 0);
+__decorate([
+    state()
+], DiffViewer.prototype, "newText", void 0);
+__decorate([
+    property({ reflect: true })
+], DiffViewer.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-line-numbers' })
+], DiffViewer.prototype, "showLineNumbers", void 0);
+DiffViewer = __decorate([
+    customElement('uibit-diff-viewer')
+], DiffViewer);
+export { DiffViewer };
+export default DiffViewer;
+//# sourceMappingURL=diff-viewer.js.map

package/dist/diff-viewer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"diff-viewer.js","sourceRoot":"","sources":["../src/diff-viewer.ts"],"names":[],"mappings":"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"}

package/dist/diff.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export type DiffOp = {
+    type: 'equal' | 'insert' | 'delete';
+    text: string;
+};
+export declare function diffLines(oldText: string, newText: string): DiffOp[];
+//# sourceMappingURL=diff.d.ts.map

package/dist/diff.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../src/diff.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAiB3E,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAuBpE"}

package/dist/diff.js ADDED Viewed

@@ -0,0 +1,39 @@
+function lcs(a, b) {
+    const m = a.length;
+    const n = b.length;
+    const dp = [];
+    for (let i = 0; i <= m; i++) {
+        dp[i] = Array.from({ length: n + 1 }).fill(0);
+    }
+    for (let i = 1; i <= m; i++) {
+        for (let j = 1; j <= n; j++) {
+            dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] + 1 : Math.max(dp[i - 1][j], dp[i][j - 1]);
+        }
+    }
+    return dp;
+}
+export function diffLines(oldText, newText) {
+    const a = oldText.split('\n');
+    const b = newText.split('\n');
+    const dp = lcs(a, b);
+    const ops = [];
+    let i = a.length;
+    let j = b.length;
+    while (i > 0 || j > 0) {
+        if (i > 0 && j > 0 && a[i - 1] === b[j - 1]) {
+            ops.push({ type: 'equal', text: a[i - 1] });
+            i--;
+            j--;
+        }
+        else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+            ops.push({ type: 'insert', text: b[j - 1] });
+            j--;
+        }
+        else {
+            ops.push({ type: 'delete', text: a[i - 1] });
+            i--;
+        }
+    }
+    return ops.reverse();
+}
+//# sourceMappingURL=diff.js.map

package/dist/diff.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"diff.js","sourceRoot":"","sources":["../src/diff.ts"],"names":[],"mappings":"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"}

package/dist/frameworks/angular/index.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, booleanAttribute } from '@angular/core';
+import '@uibit/diff-viewer';
+import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+@Component({
+  selector: 'uibit-diff-viewer',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
+})
+export class NgxDiffViewer {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.mode = this.mode();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.showLineNumbers = this.showLineNumbers();
+      }
+    });
+  }
+  readonly mode = input<'split' | 'inline', any>('split');
+  readonly showLineNumbers = input<boolean, any>(true, { transform: booleanAttribute });
+}

package/dist/frameworks/astro/index.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+import '@uibit/diff-viewer';
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-diff-viewer': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/diff-viewer');
+  }
+});

package/dist/frameworks/preact/index.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import type { JSX } from 'preact';
+import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+import '@uibit/diff-viewer';
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-diff-viewer': JSX.HTMLAttributes<HTMLElementClass> & {
+      mode?: 'split' | 'inline';
+      showLineNumbers?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/diff-viewer';
+export const DiffViewer = component$<any>((props) => {
+  return (
+    <uibit-diff-viewer {...props}>
+      <Slot />
+    </uibit-diff-viewer>
+  );
+});

package/dist/frameworks/react/index.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+import '@uibit/diff-viewer';
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-diff-viewer': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      mode?: 'split' | 'inline';
+      showLineNumbers?: boolean;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { JSX } from 'solid-js';
+import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+import '@uibit/diff-viewer';
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-diff-viewer': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              mode?: 'split' | 'inline';
+      showLineNumbers?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+import '@uibit/diff-viewer';
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-diff-viewer': HTMLElementClass & {
+    mode?: 'split' | 'inline';
+    showLineNumbers?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte ADDED Viewed

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import '@uibit/diff-viewer';
+  import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+  let {
+    mode = undefined,
+      showLineNumbers = undefined,
+      children
+  } = $props<{
+    children?: any;
+    mode?: 'split' | 'inline';
+    showLineNumbers?: boolean;
+  }>();
+  let elementRef: HTMLElementClass | null = $state(null);
+  $effect(() => {
+    if (elementRef && mode !== undefined) {
+      elementRef.mode = mode;
+    }
+    if (elementRef && showLineNumbers !== undefined) {
+      elementRef.showLineNumbers = showLineNumbers;
+    }
+  });
+</script>
+<uibit-diff-viewer bind:this={elementRef} {...$$restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-diff-viewer>

package/dist/frameworks/vue/index.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { defineComponent, h } from 'vue';
+import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
+import '@uibit/diff-viewer';
+export const DiffViewer = defineComponent({
+  name: 'DiffViewer',
+  props: {
+    mode: { type: [String, Number, Boolean, Array, Object] as any },
+    showLineNumbers: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: [],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      return h('uibit-diff-viewer', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { default, DiffViewer } from './diff-viewer';
+export type { DiffOp } from './diff';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,cAAc,SAAS,CAAC"}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { default, DiffViewer } from './diff-viewer';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEpD,cAAc,SAAS,CAAC"}

package/dist/styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const styles: import("lit").CSSResult;
2	+ //# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyHlB,CAAC"}

package/dist/styles.js ADDED Viewed

@@ -0,0 +1,124 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --uibit-diff-viewer-border-color: var(--uibit-border-color, var(--uibit-color-gray-200, #e5e7eb));
+    --uibit-diff-viewer-radius: var(--uibit-radius-2xl, 0.5rem);
+    --uibit-diff-viewer-label-color: var(--uibit-text-muted, var(--uibit-color-gray-500, #6b7280));
+    --uibit-diff-viewer-gutter-color: var(--uibit-color-gray-400, #d1d5db);
+    --uibit-diff-viewer-equal-color: var(--uibit-text-secondary, var(--uibit-color-gray-700, #374151));
+    display: block;
+    font-family: var(--uibit-diff-viewer-font-family, var(--uibit-font-mono, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace));
+    font-size: var(--uibit-diff-viewer-font-size, var(--uibit-font-size-sm, calc(0.8125rem * var(--uibit-font-scale-factor, 1))));
+    line-height: var(--uibit-diff-viewer-line-height, var(--uibit-line-height-normal, 1.5));
+    border: 0.0625rem solid var(--uibit-diff-viewer-border-color);
+    border-radius: var(--uibit-diff-viewer-radius);
+    overflow: hidden;
+  }
+  .header {
+    display: grid;
+    border-bottom: 0.0625rem solid var(--uibit-diff-viewer-border-color);
+  }
+  :host([mode="split"]) .header {
+    grid-template-columns: 1fr 1fr;
+  }
+  :host([mode="inline"]) .header {
+    grid-template-columns: 1fr;
+  }
+  .header-cell {
+    padding: calc(0.5rem * var(--uibit-spacing-factor, 1)) calc(1rem * var(--uibit-spacing-factor, 1));
+    font-size: var(--uibit-font-size-xs, calc(0.75rem * var(--uibit-font-scale-factor, 1)));
+    font-weight: var(--uibit-font-weight-medium, 500);
+    color: var(--uibit-diff-viewer-label-color, #6b7280);
+    font-family: var(--uibit-diff-viewer-font-family, inherit);
+    border-right: 0.0625rem solid var(--uibit-diff-viewer-border-color, #e5e7eb);
+  }
+  .header-cell:last-child {
+    border-right: none;
+  }
+  .body {
+    display: grid;
+    overflow: auto;
+  }
+  :host([mode="split"]) .body {
+    grid-template-columns: 1fr 1fr;
+  }
+  :host([mode="inline"]) .body {
+    grid-template-columns: 1fr;
+  }
+  .pane {
+    overflow: auto;
+    border-right: 0.0625rem solid var(--uibit-diff-viewer-border-color, #e5e7eb);
+  }
+  .pane:last-child {
+    border-right: none;
+  }
+  .line {
+    display: flex;
+    min-width: max-content;
+  }
+  .gutter {
+    user-select: none;
+    min-width: calc(3rem * var(--uibit-spacing-factor, 1));
+    padding: 0 calc(0.75rem * var(--uibit-spacing-factor, 1));
+    text-align: right;
+    color: var(--uibit-diff-viewer-gutter-color, #d1d5db);
+    border-right: 0.0625rem solid var(--uibit-diff-viewer-border-color, #e5e7eb);
+    flex-shrink: 0;
+  }
+  .content {
+    padding: 0 calc(1rem * var(--uibit-spacing-factor, 1));
+    white-space: pre;
+    flex: 1;
+  }
+  .line.delete {
+    background: rgba(239, 68, 68, 0.06);
+    color: var(--uibit-diff-delete-color, #991b1b);
+  }
+  .line.delete .gutter {
+    color: rgba(153, 27, 27, 0.4);
+  }
+  .line.insert {
+    background: rgba(34, 197, 94, 0.06);
+    color: var(--uibit-diff-insert-color, #166534);
+  }
+  .line.insert .gutter {
+    color: rgba(22, 101, 52, 0.4);
+  }
+  .line.equal {
+    background: transparent;
+    color: var(--uibit-diff-viewer-equal-color, #374151);
+  }
+  .sign {
+    display: inline-block;
+    width: 1rem;
+    margin-right: 0.25rem;
+    flex-shrink: 0;
+    opacity: 0.5;
+  }
+  .divider {
+    width: 0.0625rem;
+    background: var(--uibit-diff-viewer-border-color, #e5e7eb);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHxB,CAAC"}

package/dist/types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type DiffViewer from './diff-viewer';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-diff-viewer': DiffViewer;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,UAAU,CAAC;KACnC;CACA"}

package/dist/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=types.js.map

package/dist/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json ADDED Viewed

@@ -0,0 +1,88 @@
+{
+  "name": "@uibit/diff-viewer",
+  "version": "0.1.0",
+  "description": "Encapsulated side-by-side or inline comparison block for two text or code snippets. Computes a line-level diff internally using LCS and renders color-coded deleted/inserted/unchanged lines with optional line numbers.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "diff",
+    "code-comparison",
+    "web-component",
+    "lit"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/diff-viewer"
+  },
+  "dependencies": {
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "diff-viewer",
+    "title": "Diff Viewer",
+    "category": "Data",
+    "tagName": "uibit-diff-viewer"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}