@canonical/react-ds-app-launchpad 0.15.0 → 0.15.1

package/dist/esm/ui/FileTree/styles.css

@@ -0,0 +1,59 @@
+/* @canonical/generator-ds 0.9.0-experimental.1 */
+
+.ds.file-tree {
+  --file-tree-container-border-color: #c4c4c4;
+
+  --file-tree-node-icon-size: 16px;
+
+  --file-tree-node-text-size: 0.875rem;
+  --file-tree-node-text-weight: 400;
+  --file-tree-node-text-weight-active: 550;
+
+  --file-tree-node-text-line-height: 1.25rem;
+
+  --file-tree-node-text-color-active: #000000;
+  --file-tree-node-text-color-default: #000000;
+
+  --file-tree-node-background-color: #ffffff;
+  --file-tree-node-background-color-hover: #f2f2f2;
+  --file-tree-node-background-color-active: #f2f2f2;
+
+  --file-tree-node-border-color: transparent;
+  --file-tree-node-border-color-hover: transparent;
+  --file-tree-node-border-color-active: black;
+
+  --file-tree-node-indent-width: 16px;
+  --file-tree-node-indent-bar-color: #efefef;
+  --file-tree-node-indent-bar-width: 1px;
+  --file-tree-node-items-gap: 8px;
+  --file-tree-node-horizontal-padding: 0.25rem;
+  --file-tree-node-vertical-padding: 0.25rem;
+
+  --file-tree-node-file-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.99194 2.5H4.5V13.5H11.5V7.00806H9.24194C7.9993 7.00806 6.99194 6.0007 6.99194 4.75806V2.5ZM10.8869 5.50806L8.49194 3.1127V4.75806C8.49194 5.17227 8.82773 5.50806 9.24194 5.50806H10.8869ZM3 2.5C3 1.67157 3.67157 1 4.5 1H8.08647C8.35172 1 8.60609 1.10538 8.79364 1.29295L12.7072 5.20712C12.8947 5.39465 13 5.64898 13 5.91417V13.5C13 14.3284 12.3284 15 11.5 15H4.5C3.67157 15 3 14.3284 3 13.5V2.5ZM5.65837 8.48389H10.4917V9.98389H5.65837V8.48389ZM5.65837 10.7339V12.2339H10.4917V10.7339H5.65837Z' fill='black'/%3E%3C/svg%3E%0A");
+  --file-tree-node-closed-folder-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 5H13.5C14.3284 5 15 5.67157 15 6.5V12.5C15 13.3284 14.3284 14 13.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H8.5C9.32843 2 10 2.67157 10 3.5V5ZM8.5 3.5V5H2.5V3.5H8.5ZM2.5 12.5L2.5 6.5H13.5V12.5H2.5Z' fill='black'/%3E%3C/svg%3E%0A");
+  --file-tree-node-opened-folder-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 5.46408V3.60693H2.5V8.66667L2.94235 7.09388C3.12429 6.44696 3.7143 6 4.38632 6H11.5V5.46408H6ZM13 6H14.0216C15.0862 6 15.812 7.07821 15.4113 8.06457L13.38 13.0646C13.1503 13.6301 12.6007 14 11.9903 14H2.98007C2.97153 14 2.963 13.9999 2.9545 13.9998H2.5C1.67157 13.9998 1 13.3282 1 12.4998V3.60693C1 2.77851 1.67157 2.10693 2.5 2.10693H6C6.82843 2.10693 7.5 2.77851 7.5 3.60693V3.96408H11.5C12.3284 3.96408 13 4.63565 13 5.46408V6ZM4.38632 7.5H14.0216L11.9903 12.5H2.98007L4.38632 7.5Z' fill='black'/%3E%3C/svg%3E%0A");
+
+  --file-tree-search-box-vertical-padding: 6px;
+  --file-tree-search-box-horizontal-padding: 8px;
+
+  --file-tree-search-box-line-height: 24px;
+  --file-tree-search-box-button-size: 24px;
+  --file-tree-search-box-background-color: #f5f5f5;
+  --file-tree-search-box-border-color: #6c6c6c;
+
+  --file-tree-search-box-search-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.96399 1C8.08013 1.00013 9.17384 1.31346 10.1207 1.90436C11.0676 2.49526 11.8297 3.34002 12.3203 4.34256C12.8109 5.34511 13.0103 6.4652 12.8959 7.57547C12.7815 8.68573 12.3578 9.7416 11.673 10.623L15.976 14.928L14.916 15.988L10.61 11.683C9.85937 12.2631 8.98121 12.6558 8.0484 12.8284C7.1156 13.001 6.15506 12.9487 5.24655 12.6757C4.33805 12.4026 3.50777 11.9168 2.82467 11.2586C2.14157 10.6003 1.62534 9.7886 1.31886 8.89083C1.01237 7.99305 0.924467 7.03512 1.06244 6.09656C1.20042 5.158 1.5603 4.26589 2.11219 3.49431C2.66409 2.72273 3.39208 2.09393 4.23573 1.66012C5.07938 1.22631 6.01434 1.00001 6.96299 1H6.96399ZM6.96399 2.5C6.37221 2.49114 5.78458 2.60005 5.23528 2.82039C4.68598 3.04072 4.18598 3.36809 3.76436 3.78344C3.34274 4.19879 3.00793 4.69384 2.7794 5.23978C2.55087 5.78572 2.43318 6.37166 2.43318 6.9635C2.43318 7.55534 2.55087 8.14128 2.7794 8.68722C3.00793 9.23316 3.34274 9.72821 3.76436 10.1436C4.18598 10.5589 4.68598 10.8863 5.23528 11.1066C5.78458 11.327 6.37221 11.4359 6.96399 11.427C8.13621 11.4095 9.25448 10.9315 10.0772 10.0963C10.9 9.26115 11.3612 8.13585 11.3612 6.9635C11.3612 5.79115 10.9 4.66585 10.0772 3.83069C9.25448 2.99553 8.13621 2.51755 6.96399 2.5Z' fill='black'/%3E%3C/svg%3E%0A");
+  --file-tree-search-box-reset-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
+
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--file-tree-container-border-color);
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+}

package/dist/esm/ui/FileTree/types.js

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

package/dist/esm/ui/FileTree/types.js.map

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

package/dist/esm/ui/FileTree/utils/hashNodeName.js

@@ -0,0 +1,11 @@
+const hashNodeName = (name) => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        const char = name.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash |= 0;
+    }
+    return hash;
+};
+export default hashNodeName;
+//# sourceMappingURL=hashNodeName.js.map

package/dist/esm/ui/FileTree/utils/hashNodeName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hashNodeName.js","sourceRoot":"","sources":["../../../../../src/ui/FileTree/utils/hashNodeName.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAAE;IACpC,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAChC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;QACjC,IAAI,IAAI,CAAC,CAAC;IACZ,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/ui/FileTree/utils/index.js

@@ -0,0 +1,2 @@
+export { default as hashNodeName } from "./hashNodeName.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/FileTree/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/ui/GitDiffViewer/Context.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const GitDiffViewerContext = createContext(null);
+export default GitDiffViewerContext;
+//# sourceMappingURL=Context.js.map

package/dist/esm/ui/GitDiffViewer/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/ui/GitDiffViewer/Context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,oBAAoB,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAC;AAExE,eAAe,oBAAoB,CAAC"}

package/dist/esm/ui/GitDiffViewer/Provider.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState } from "react";
+import Context from "./Context.js";
+import "./styles.css";
+const componentCssClassName = "ds git-diff-viewer";
+const Provider = forwardRef(({ id, className, style, children, ...contextOptions }, ref) => {
+    const [addCommentOpenLocations, setAddCommentOpenLocations] = useState(new Set());
+    const toggleAddCommentLocation = useCallback((lineNumber) => {
+        const newSet = new Set(addCommentOpenLocations);
+        if (newSet.has(lineNumber)) {
+            newSet.delete(lineNumber);
+        }
+        else {
+            newSet.add(lineNumber);
+        }
+        setAddCommentOpenLocations(newSet);
+    }, [addCommentOpenLocations]);
+    return (_jsx(Context.Provider, { value: {
+            ...contextOptions,
+            addCommentOpenLocations,
+            toggleAddCommentLocation,
+        }, children: _jsx("div", { id: id, style: style, className: [componentCssClassName, className]
+                .filter(Boolean)
+                .join(" "), ref: ref, children: children }) }));
+});
+export default Provider;
+//# sourceMappingURL=Provider.js.map

package/dist/esm/ui/GitDiffViewer/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/ui/GitDiffViewer/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,oBAAoB,CAAC;AAEnD,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,EACrD,GAAG,EACiB,EAAE;IACtB,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAEpE,IAAI,GAAG,EAAE,CAAC,CAAC;IAEb,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,UAAkB,EAAE,EAAE;QACrB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,uBAAuB,CAAC,CAAC;QAChD,IAAI,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC3B,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;QACD,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IACf,KAAK,EAAE;YACL,GAAG,cAAc;YACjB,uBAAuB;YACvB,wBAAwB;SACzB,YAED,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC;iBAC1C,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,EACZ,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,GACW,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/CodeDiffViewer.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
+import { useGitDiffViewer } from "../../hooks/index.js";
+import { highlightDiffHunkLines } from "../../utils/index.js";
+import { DiffLine } from "./common/index.js";
+import "./HighlighTheme.css";
+import "./styles.css";
+import { AnnotatedDiffLine } from "./common/AnnotatedDiffLine/index.js";
+import * as icons from "./common/icons.js";
+import { tableWidthCSSVar } from "./constants.js";
+const componentCssClassName = "ds code-diff-viewer";
+/**
+ * Displays a diff in a table format with line numbers and syntax highlighting.
+ * With option to add comments to specific lines and interactive gutter for adding comments.
+ *
+ * @returns {React.ReactElement} - Rendered CodeDiffViewer
+ */
+const CodeDiffViewer = ({ id, AddComment, onLineClick, className, style, disableWidthCalculation = false, }, ref) => {
+    const { isCollapsed, diff } = useGitDiffViewer();
+    const tableRef = useRef(null);
+    const highlightedLines = useMemo(() => {
+        if (!diff)
+            return [];
+        return diff.hunks.map((hunk) => highlightDiffHunkLines(diff.newPath, hunk.lines));
+    }, [diff]);
+    useImperativeHandle(ref, () => tableRef.current);
+    /**
+     * Observe the table for size changes and update the CSS variable
+     */
+    useEffect(() => {
+        // SSR check
+        if (typeof ResizeObserver === "undefined")
+            return;
+        if (disableWidthCalculation || isCollapsed)
+            return;
+        if (!tableRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            if (!tableRef.current)
+                return;
+            tableRef.current.style.cssText = `${tableWidthCSSVar}: ${tableRef.current.clientWidth}px`;
+        });
+        resizeObserver.observe(tableRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [disableWidthCalculation, isCollapsed]);
+    if (isCollapsed)
+        return null;
+    return (_jsxs("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: [_jsx("div", { className: "diff-hunk", children: _jsx("table", { className: "diff-table", ref: tableRef, tabIndex: -1, children: _jsx("tbody", { children: diff.hunks.map((hunk, hunkIndex) => {
+                            // We'll track the counters for old and new lines
+                            // as we iterate through each hunk.
+                            let oldLineCounter = hunk.positions.old.start;
+                            let newLineCounter = hunk.positions.new.start;
+                            return (_jsxs(Fragment, { children: [_jsx(DiffLine, { type: "hunk", hunkHeader: hunk.header, hunkIndex: hunkIndex }), hunk.lines.map((line, lineIndex) => {
+                                        const newLineNumber = newLineCounter;
+                                        const oldLineNumber = oldLineCounter;
+                                        if (line.type === "remove") {
+                                            oldLineCounter++;
+                                        }
+                                        else if (line.type === "add") {
+                                            newLineCounter++;
+                                        }
+                                        else {
+                                            oldLineCounter++;
+                                            newLineCounter++;
+                                        }
+                                        return (_jsx(AnnotatedDiffLine, { newLineNumber: newLineNumber, oldLineNumber: oldLineNumber, diffLineNumber: hunk.positions.diff.start + lineIndex, content: highlightedLines[hunkIndex][lineIndex], type: line.type, onLineClick: onLineClick, AddComment: AddComment }, `${diff.oldPath}-${hunkIndex}-${lineIndex}`));
+                                    })] }, `${diff.oldPath}-${hunkIndex}`));
+                        }) }) }) }), _jsx("div", { className: "svg-refs", children: icons.CommentIcon })] }));
+};
+CodeDiffViewer.displayName = "GitDiffViewer.CodeDiff";
+export default forwardRef(CodeDiffViewer);
+//# sourceMappingURL=CodeDiffViewer.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/CodeDiffViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeDiffViewer.js","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/CodeDiffViewer.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/HighlighTheme.css

@@ -0,0 +1,171 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+
+  color: #000000;
+  background: #f7f7f7;
+  font-family: var(--font-family-mono);
+}
+
+.hljs-comment,
+.hljs-prolog,
+.hljs-doctype,
+.hljs-cdata {
+  color: #8b949e;
+}
+
+.hljs-punctuation {
+  color: #000000;
+}
+
+.hljs-namespace {
+  opacity: 0.7;
+}
+
+.hljs-property,
+.hljs-tag,
+.hljs-boolean,
+.hljs-number,
+.hljs-constant,
+.hljs-symbol,
+.hljs-deleted {
+  color: #77216f;
+}
+
+.hljs-selector,
+.hljs-attr-name,
+.hljs-string,
+.hljs-char,
+.hljs-builtin,
+.hljs-inserted {
+  color: #0e811f;
+}
+
+.hljs-operator,
+.hljs-entity,
+.hljs-url,
+.language-css .hljs-string,
+.style .hljs-string {
+  color: #a86500;
+}
+
+.hljs-atrule,
+.hljs-attr-value,
+.hljs-keyword {
+  color: #06c;
+}
+
+.hljs-function,
+.hljs-class-name {
+  color: #c7162b;
+}
+
+.hljs-regexp,
+.hljs-important,
+.hljs-variable {
+  color: #dc3023;
+}
+
+.hljs-important,
+.hljs-bold {
+  font-weight: bold;
+}
+
+.hljs-italic {
+  font-style: italic;
+}
+
+.hljs-entity {
+  cursor: help;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-meta,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: #77216f;
+}
+
+.hljs-variable,
+.hljs-literal,
+.hljs-number,
+.hljs-doctag {
+  color: #77216f;
+}
+
+.hljs-params {
+  color: #000000;
+}
+
+.hljs-class,
+.hljs-tag,
+.hljs-title,
+.hljs-built_in {
+  color: #0e811f;
+}
+
+.hljs-keyword,
+.hljs-type,
+.hljs-builtin-name,
+.hljs-meta-keyword,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #06c;
+}
+
+.hljs-string,
+.hljs-undefined {
+  color: #0e811f;
+}
+
+.hljs-regexp {
+  color: #dc3023;
+}
+
+.hljs-symbol {
+  color: #77216f;
+}
+
+.hljs-bullet {
+  color: #a86500;
+}
+
+.hljs-section {
+  color: #77216f;
+  font-weight: bold;
+}
+
+.hljs-quote,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  color: #0e811f;
+}
+
+.hljs-emphasis {
+  color: #06c;
+  font-style: italic;
+}
+
+.hljs-strong {
+  color: #06c;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  color: #dc3023;
+  background-color: transparent;
+}
+
+.hljs-addition {
+  color: #0e811f;
+  background-color: transparent;
+}
+
+.hljs-link {
+  color: #a86500;
+  font-style: underline;
+}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/AnnotatedDiffLine.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useGitDiffViewer } from "../../../../hooks/index.js";
+import DiffLine from "../DiffLine/DiffLine.js";
+import "./styles.css";
+const componentCssClassName = "ds annotated-diff-line";
+/**
+ * A component that displays a diff line content, line decorations and AddComment component.
+ * @returns {React.ReactElement} - Rendered AnnotatedDiffLine
+ */
+const AnnotatedDiffLine = ({ newLineNumber, oldLineNumber, diffLineNumber, AddComment, onLineClick, type, ...rest }) => {
+    const { addCommentOpenLocations, toggleAddCommentLocation, lineDecorations } = useGitDiffViewer();
+    const diffLineIsInteractive = Boolean(onLineClick || AddComment);
+    const hunkLineNumber = useMemo(() => {
+        return type === "add" ? newLineNumber : oldLineNumber;
+    }, [type, newLineNumber, oldLineNumber]);
+    const handleLineClick = useCallback(() => {
+        if (diffLineIsInteractive) {
+            onLineClick?.({
+                hunkLineNumber,
+                diffLineNumber,
+            });
+            toggleAddCommentLocation(diffLineNumber);
+        }
+    }, [
+        onLineClick,
+        diffLineNumber,
+        hunkLineNumber,
+        toggleAddCommentLocation,
+        diffLineIsInteractive,
+    ]);
+    const handleCloseComment = useCallback(() => {
+        toggleAddCommentLocation(diffLineNumber);
+    }, [toggleAddCommentLocation, diffLineNumber]);
+    return (_jsxs(_Fragment, { children: [_jsx(DiffLine, { ...rest, type: type, addLineNumber: newLineNumber, removeLineNumber: oldLineNumber, onLineClick: diffLineIsInteractive ? handleLineClick : undefined }), lineDecorations?.[diffLineNumber] && (_jsx("tr", { className: componentCssClassName, children: _jsx("td", { className: "container", children: lineDecorations[diffLineNumber] }) })), AddComment && addCommentOpenLocations.has(diffLineNumber) && (_jsx("tr", { className: componentCssClassName, children: _jsx("td", { className: "container", children: _jsx(AddComment, { hunkLineNumber: hunkLineNumber, diffLineNumber: diffLineNumber, onClose: handleCloseComment }) }) }))] }));
+};
+export default AnnotatedDiffLine;
+//# sourceMappingURL=AnnotatedDiffLine.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/AnnotatedDiffLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotatedDiffLine.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/AnnotatedDiffLine.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAEvD;;;GAGG;AACH,MAAM,iBAAiB,GAAG,CAAC,EACzB,aAAa,EACb,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,IAAI,EACJ,GAAG,IAAI,EACgB,EAAsB,EAAE;IAC/C,MAAM,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,eAAe,EAAE,GAC1E,gBAAgB,EAAE,CAAC;IAErB,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,IAAI,UAAU,CAAC,CAAC;IAEjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;IACxD,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,qBAAqB,EAAE,CAAC;YAC1B,WAAW,EAAE,CAAC;gBACZ,cAAc;gBACd,cAAc;aACf,CAAC,CAAC;YACH,wBAAwB,CAAC,cAAc,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE;QACD,WAAW;QACX,cAAc;QACd,cAAc;QACd,wBAAwB;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,wBAAwB,CAAC,cAAc,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,wBAAwB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,8BACE,KAAC,QAAQ,OACH,IAAI,EACR,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,aAAa,EAC/B,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,GAChE,EACD,eAAe,EAAE,CAAC,cAAc,CAAC,IAAI,CACpC,aAAI,SAAS,EAAE,qBAAqB,YAClC,aAAI,SAAS,EAAC,WAAW,YAAE,eAAe,CAAC,cAAc,CAAC,GAAM,GAC7D,CACN,EAEA,UAAU,IAAI,uBAAuB,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,CAC5D,aAAI,SAAS,EAAE,qBAAqB,YAClC,aAAI,SAAS,EAAC,WAAW,YACvB,KAAC,UAAU,IACT,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,kBAAkB,GAC3B,GACC,GACF,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.12 */
+export { default as AnnotatedDiffLine } from "./AnnotatedDiffLine.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,cAAc,YAAY,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/styles.css

@@ -0,0 +1,15 @@
+/* @canonical/generator-ds 0.9.0-experimental.12 */
+
+.ds.annotated-diff-line {
+  display: flex;
+  position: sticky;
+  left: 0;
+  width: var(--table-width);
+  .container {
+    width: 100%;
+    border: 1px solid var(--git-diff-viewer-border-color-tinted);
+    border-width: 1px 0;
+    border-radius: 1px;
+    padding: 0;
+  }
+}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.9.0-experimental.12 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/AnnotatedDiffLine/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/DiffLine.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGitDiffViewer } from "../../../../hooks/index.js";
+import "./styles.css";
+const componentCssClassName = "ds diff-line";
+const firstHunkLineCssClassName = "is-first-hunk";
+/**
+ * Displays a single line of a diff as a table row with line numbers.
+ *
+ * @returns {React.ReactElement} - Rendered DiffLine
+ */
+const DiffLine = ({ id, className, style, onLineClick, ...props }) => {
+    const { wrapLines } = useGitDiffViewer();
+    const typeClass = `diff-line-${props.type}`;
+    const isInteractive = Boolean(onLineClick);
+    return (_jsxs("tr", { id: id, style: style, className: [
+            componentCssClassName,
+            typeClass,
+            isInteractive && "interactive",
+            className,
+            props.type === "hunk" &&
+                props.hunkIndex === 0 &&
+                firstHunkLineCssClassName,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsx("td", { className: `diff-gutter ${wrapLines ? "wrap" : ""} ${props.type}`, tabIndex: isInteractive && props.type !== "hunk" ? 0 : undefined, onClick: onLineClick, onKeyUp: (e) => {
+                    if (e.key === "Enter") {
+                        onLineClick?.();
+                    }
+                }, onKeyDown: undefined, children: props.type === "hunk" ? ("\u00A0") : (_jsxs("div", { className: "diff-line-numbers", children: [isInteractive && (_jsx("span", { className: "comment-icon", children: _jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("use", { href: "#comment-icon" }), _jsx("title", { children: "Comment" })] }) })), _jsx("span", { className: "line-num", children: props.type === "add" ? "+" : props.removeLineNumber }), _jsx("span", { className: "line-num", children: props.type === "remove" ? "-" : props.addLineNumber })] })) }), _jsx("td", { className: `diff-content ${wrapLines ? "wrap" : ""}`, children: props.type === "hunk" ? (_jsx("pre", { children: props.hunkHeader })) : (_jsx("pre", { 
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: syntax highlighting requires adding generated HTML
+                    dangerouslySetInnerHTML: {
+                        __html: props.content ? props.content : "\u00A0",
+                    } })) })] }));
+};
+export default DiffLine;
+//# sourceMappingURL=DiffLine.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/DiffLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffLine.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/DiffLine.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAC7C,MAAM,yBAAyB,GAAG,eAAe,CAAC;AAElD;;;;GAIG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACM,EAAsB,EAAE;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,aAAa,KAAK,CAAC,IAAI,EAAE,CAAC;IAC5C,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;IAE3C,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE;YACT,qBAAqB;YACrB,SAAS;YACT,aAAa,IAAI,aAAa;YAC9B,SAAS;YACT,KAAK,CAAC,IAAI,KAAK,MAAM;gBACnB,KAAK,CAAC,SAAS,KAAK,CAAC;gBACrB,yBAAyB;SAC5B;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAEZ,aACE,SAAS,EAAE,eAAe,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,EAAE,EACjE,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAChE,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,WAAW,EAAE,EAAE,CAAC;oBAClB,CAAC;gBACH,CAAC,EACD,SAAS,EAAE,SAAS,YAEnB,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACvB,QAAQ,CACT,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAC,mBAAmB,aAC/B,aAAa,IAAI,CAChB,eAAM,SAAS,EAAC,cAAc,YAC5B,eACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,cAAK,IAAI,EAAC,eAAe,GAAG,EAC5B,sCAAsB,IAClB,GACD,CACR,EACD,eAAM,SAAS,EAAC,UAAU,YACvB,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,GAC/C,EACP,eAAM,SAAS,EAAC,UAAU,YACvB,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,GAC/C,IACH,CACP,GACE,EACL,aAAI,SAAS,EAAE,gBAAgB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,YACrD,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACvB,wBAAM,KAAK,CAAC,UAAU,GAAO,CAC9B,CAAC,CAAC,CAAC,CACF;oBACE,2GAA2G;oBAC3G,uBAAuB,EAAE;wBACvB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;qBACjD,GACD,CACH,GACE,IACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-canonical-ds 0.0.1 */
+export { default as DiffLine } from "./DiffLine.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,cAAc,YAAY,CAAC"}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/styles.css

@@ -0,0 +1,118 @@
+/* @canonical/generator-canonical-ds 0.0.1 */
+
+.ds.diff-line {
+  display: flex;
+  font-family: var(--font-family-mono);
+  min-width: var(--table-width);
+  color: var(--git-diff-viewer-code-default-color);
+
+  &.diff-line-add {
+    background-color: var(--git-diff-viewer-code-insertion-background);
+
+    td.diff-gutter {
+      background-color: var(--git-diff-viewer-code-insertion-background);
+    }
+  }
+
+  &.diff-line-context {
+    background-color: var(--git-diff-viewer-code-default-background);
+
+    td.diff-gutter {
+      background-color: var(--git-diff-viewer-code-default-background);
+    }
+  }
+
+  &.diff-line-remove {
+    background-color: var(--git-diff-viewer-code-deletion-background);
+
+    td.diff-gutter {
+      background-color: var(--git-diff-viewer-code-deletion-background);
+    }
+  }
+
+  &.diff-line-hunk {
+    background-color: var(--git-diff-viewer-hunk-header-background);
+    color: var(--git-diff-viewer-hunk-header-color);
+    user-select: none;
+    border-color: var(--git-diff-viewer-border-color-tinted);
+    border-style: solid;
+    border-width: 1px 0;
+
+    &.is-first-hunk {
+      border-top-width: 0px;
+    }
+
+    td.diff-gutter {
+      background-color: var(--git-diff-viewer-hunk-header-background);
+      border-color: var(--git-diff-viewer-border-color-tinted);
+    }
+  }
+
+  td.diff-gutter {
+    min-width: var(--git-diff-viewer-gutter-width);
+    max-width: var(--git-diff-viewer-gutter-width);
+    padding: 0;
+    text-align: right;
+    border-right: 1px solid var(--git-diff-viewer-border-color-tinted);
+    user-select: none;
+    vertical-align: top;
+
+    &:not(.wrap) {
+      position: sticky;
+      left: 0;
+    }
+
+    .diff-line-numbers {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0px;
+    }
+    .line-num {
+      display: inline-block;
+      width: calc(var(--git-diff-viewer-gutter-width) / 2 - 4px);
+      text-align: center;
+      color: var(--git-diff-viewer-code-line-number-default-color);
+    }
+  }
+
+  td.diff-content {
+    /* padding: 0 0 0 calc(var(--git-diff-viewer-gutter-width) + 4px); */
+    padding: 0 0 0 4px;
+
+    &.wrap {
+      pre {
+        text-wrap: wrap;
+      }
+    }
+
+    pre {
+      margin: 0;
+      padding: 0 8px;
+      font-family: var(--font-family-mono);
+    }
+  }
+
+  &.interactive {
+    --icon-opacity: 0;
+
+    &:not(.diff-line-hunk) {
+      .diff-gutter {
+        cursor: pointer;
+        .comment-icon {
+          opacity: var(--icon-opacity);
+          padding: 0 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      &:hover,
+      &:focus-within {
+        filter: brightness(0.9);
+        --icon-opacity: 1;
+      }
+    }
+  }
+}

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/types.js

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

package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/types.js.map

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