@canonical/react-ds-app-launchpad 0.9.0-experimental.9 → 0.9.0

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

@@ -2,28 +2,31 @@ 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, ...props }) => {
-    const { wrapLines, addCommentEnabled, toggleAddCommentLocation } = useGitDiffViewer();
-    const gutterIsInteractive = addCommentEnabled;
+const DiffLine = ({ id, className, style, onLineClick, ...props }) => {
+    const { wrapLines } = useGitDiffViewer();
     const typeClass = `diff-line-${props.type}`;
-    const lineNumber = props.type !== "hunk" ? Number(props.lineNum2 || props.lineNum1) : 0;
+    const isInteractive = Boolean(onLineClick);
     return (_jsxs("tr", { id: id, style: style, className: [
             componentCssClassName,
             typeClass,
-            gutterIsInteractive ? "interactive" : "",
+            isInteractive && "interactive",
             className,
+            props.type === "hunk" &&
+                props.hunkIndex === 0 &&
+                firstHunkLineCssClassName,
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx("td", { className: `diff-gutter ${wrapLines ? "wrap" : ""} ${props.type}`, tabIndex: gutterIsInteractive && props.type !== "hunk" ? 0 : undefined, onClick: () => toggleAddCommentLocation(lineNumber), onKeyUp: (e) => {
+            .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") {
-                        toggleAddCommentLocation(lineNumber);
+                        onLineClick?.();
                     }
-                }, onKeyDown: undefined, children: props.type === "hunk" ? ("\u00A0") : (_jsxs("div", { className: "diff-line-numbers", children: [_jsx("span", { className: "line-num", children: props.lineNum1 ?? "+" }), _jsx("span", { className: "line-num", children: props.lineNum2 ?? "-" })] })) }), _jsx("td", { className: `diff-content ${wrapLines ? "wrap" : ""}`, children: props.type === "hunk" ? (_jsx("pre", { children: props.hunkHeader })) : (_jsx("pre", { 
+                }, 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",

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

@@ -1 +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;AAE7C;;;;GAIG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACM,EAAsB,EAAE;IACtC,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,GAC9D,gBAAgB,EAAE,CAAC;IACrB,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAC9C,MAAM,SAAS,GAAG,aAAa,KAAK,CAAC,IAAI,EAAE,CAAC;IAE5C,MAAM,UAAU,GACd,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE;YACT,qBAAqB;YACrB,SAAS;YACT,mBAAmB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;YACxC,SAAS;SACV;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,mBAAmB,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACtE,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,UAAU,CAAC,EACnD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,wBAAwB,CAAC,UAAU,CAAC,CAAC;oBACvC,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,aAChC,eAAM,SAAS,EAAC,UAAU,YAAE,KAAK,CAAC,QAAQ,IAAI,GAAG,GAAQ,EACzD,eAAM,SAAS,EAAC,UAAU,YAAE,KAAK,CAAC,QAAQ,IAAI,GAAG,GAAQ,IACrD,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"}
+{"version":3,"file":"DiffLine.js","sourceRoot":"","sources":["../../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/DiffLine.tsx"],"names":[],"mappings":";AAGA,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/styles.css

@@ -34,7 +34,13 @@
     background-color: var(--git-diff-viewer-hunk-header-background);
     color: var(--git-diff-viewer-hunk-header-color);
     user-select: none;
-    border-bottom: 1px solid var(--git-diff-viewer-border-color-tinted);
+    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);
@@ -66,6 +72,7 @@
       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);
     }
   }
 
@@ -85,25 +92,25 @@
       font-family: var(--font-family-mono);
     }
   }
+
   &.interactive {
     --icon-opacity: 0;
+
     &:not(.diff-line-hunk) {
       .diff-gutter {
         cursor: pointer;
-        .diff-line-numbers::before {
-          content: var(--comment-icon);
-          display: inline-block;
-          width: var(--comment-icon-width);
+        .comment-icon {
           opacity: var(--icon-opacity);
           padding: 0 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }
 
-      &:has(.diff-gutter:hover),
-      &:has(.diff-gutter:focus) {
+      &:hover,
+      &:focus-within {
         filter: brightness(0.9);
-      }
-      &:has(.diff-gutter:hover) {
         --icon-opacity: 1;
       }
     }

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CommentIcon = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", id: "comment-icon", children: [_jsx("path", { fill: "currentColor", d: "M12 2a3 3 0 0 1 3 3v5a3.002 3.002 0 0 1-2 2.829V16l-4.5-3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h8Zm0 1.5H4a1.5 1.5 0 0 0-1.493 1.356L2.5 5v5a1.5 1.5 0 0 0 1.356 1.493L4 11.5h4.954l2.546 1.696.001-1.428 1-.353c.548-.194.935-.69.992-1.269L13.5 10V5a1.5 1.5 0 0 0-1.356-1.493L12 3.5ZM7.976 8.25v1.5H4.994v-1.5h2.982Zm3.005-3v1.5H4.994v-1.5h5.987Z" }), _jsx("title", { children: "Comment" })] }));
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/common/icons.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,cAAc,aAEjB,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,mVAAmV,GACrV,EACF,sCAAsB,IAClB,CACP,CAAC"}

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

@@ -0,0 +1,2 @@
+export const tableWidthCSSVar = "--table-width";
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC"}

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

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

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

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

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

@@ -2,10 +2,8 @@
 
 .ds.code-diff-viewer {
   font-size: 13px;
-  .diff-table {
-    --comment-icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C12.7956 2 13.5587 2.31607 14.1213 2.87868C14.6839 3.44129 15 4.20435 15 5V10C15 10.6204 14.8076 11.2256 14.4495 11.7323C14.0913 12.2389 13.5849 12.622 13 12.829V16L8.5 13H4C3.20435 13 2.44129 12.6839 1.87868 12.1213C1.31607 11.5587 1 10.7956 1 10V5C1 4.20435 1.31607 3.44129 1.87868 2.87868C2.44129 2.31607 3.20435 2 4 2H12ZM12 3.5H4C3.62712 3.50002 3.26761 3.63892 2.99158 3.88962C2.71555 4.14032 2.5428 4.48484 2.507 4.856L2.5 5V10C2.50002 10.3729 2.63892 10.7324 2.88962 11.0084C3.14032 11.2844 3.48484 11.4572 3.856 11.493L4 11.5H8.954L11.5 13.196L11.501 11.768L12.501 11.415C13.049 11.221 13.436 10.725 13.493 10.146L13.5 10V5C13.5 4.62712 13.3611 4.26761 13.1104 3.99158C12.8597 3.71555 12.5152 3.5428 12.144 3.507L12 3.5ZM7.976 8.25V9.75H4.994V8.25H7.976ZM10.981 5.25V6.75H4.994V5.25H10.981Z" fill="currentColor"/></svg>');
-    --comment-icon-width: 16px;
 
+  .diff-table {
     /* updated dynamically on window resize */
     --table-width: 300px;
 
@@ -21,19 +19,9 @@
       margin-left: -1px;
       margin-right: -1px;
     }
+  }
 
-    .line-decoration {
-      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;
-      }
-    }
+  > .svg-refs {
+    display: none;
   }
 }

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

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { useGitDiffViewer } from "../../hooks/index.js";
 import "./styles.css";
+import { DiffChangeMarker } from "../../../index.js";
 const componentCssClassName = "ds file-header";
 /**
  * Displays the file name and change count for a diff.
@@ -28,7 +29,7 @@ const FileHeader = ({ id, children, className, style, hideCollapse = false, show
         return { additions, deletions };
     }, [diff]);
     const changesCount = calculateChangeCount();
-    return (_jsxs("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), ...props, children: [_jsxs("div", { className: "left-content", children: [leftContent, shouldRenderCollapse && (_jsx("button", { className: `collapse-button ${isCollapsed ? "collapsed" : ""}`, onClick: () => onCollapseToggle(!isCollapsed), "aria-label": "Collapse file", type: "button", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "Collapse" }), _jsx("path", { d: "M11.811 8.124L5.62399 1.937L4.56299 2.997L9.68999 8.124L4.56299 13.25L5.62399 14.311L11.811 8.124Z", fill: "currentColor" })] }) })), _jsx("h5", { className: "file-name", children: diff.newPath })] }), _jsxs("div", { className: "right-content", children: [showChangeCount && (_jsx("div", { className: "change-count", children: diff.fileChangeState === "modified" ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "deletions", children: ["-", changesCount.deletions] }), _jsxs("span", { className: "insertions", children: ["+", changesCount.additions] })] })) : diff.fileChangeState === "added" ? (_jsx("span", { className: "insertions", children: "Added" })) : diff.fileChangeState === "deleted" ? (_jsx("span", { className: "deletions", children: "Removed" })) : (_jsx(_Fragment, {})) })), rightContent] }), children] }));
+    return (_jsxs("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), ...props, children: [_jsxs("div", { className: "left-content", children: [leftContent, shouldRenderCollapse && (_jsx("button", { className: `collapse-button ${isCollapsed ? "collapsed" : ""}`, onClick: () => onCollapseToggle(!isCollapsed), "aria-label": "Collapse file", type: "button", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "Collapse" }), _jsx("path", { d: "M11.811 8.124L5.62399 1.937L4.56299 2.997L9.68999 8.124L4.56299 13.25L5.62399 14.311L11.811 8.124Z", fill: "currentColor" })] }) })), _jsx("h5", { className: "file-name", children: diff.newPath })] }), _jsxs("div", { className: "right-content", children: [showChangeCount && (_jsx("div", { className: "change-count", children: diff.fileChangeState === "modified" ? (_jsx(DiffChangeMarker, { additions: changesCount.additions, deletions: changesCount.deletions, markerStyle: "detailed" })) : (diff.fileChangeState !== "none" && (_jsx(DiffChangeMarker, { type: diff.fileChangeState, markerStyle: "detailed" }))) })), rightContent] }), children] }));
 };
 FileHeader.displayName = "GitDiffViewer.FileHeader";
 export default FileHeader;

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

@@ -1 +1 @@
-{"version":3,"file":"FileHeader.js","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/FileHeader/FileHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAY,GAAG,KAAK,EACpB,eAAe,EACf,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACQ,EAAsB,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACnE,MAAM,oBAAoB,GAAG,CAAC,YAAY,IAAI,WAAW,KAAK,SAAS,CAAC;IAExE,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC9B,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;oBACxB,SAAS,EAAE,CAAC;gBACd,CAAC;qBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;oBAClC,SAAS,EAAE,CAAC;gBACd,CAAC;YACH,CAAC;QACH,CAAC;QACD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;IAClC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,MAAM,YAAY,GAAG,oBAAoB,EAAE,CAAC;IAC5C,OAAO,CACL,eACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,KAAK,aAET,eAAK,SAAS,EAAC,cAAc,aAC1B,WAAW,EACX,oBAAoB,IAAI,CACvB,iBACE,SAAS,EAAE,mBAAmB,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,gBAClC,eAAe,EAC1B,IAAI,EAAC,QAAQ,YAEb,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,uCAAuB,EACvB,eACE,CAAC,EAAC,oGAAoG,EACtG,IAAI,EAAC,cAAc,GACnB,IACE,GACC,CACV,EACA,aAAI,SAAS,EAAC,WAAW,YAAE,IAAI,CAAC,OAAO,GAAM,IAC1C,EACN,eAAK,SAAS,EAAC,eAAe,aAC3B,eAAe,IAAI,CAClB,cAAK,SAAS,EAAC,cAAc,YAC1B,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,CAAC,CAAC,CACrC,8BACE,gBAAM,SAAS,EAAC,WAAW,kBAAG,YAAY,CAAC,SAAS,IAAQ,EAC5D,gBAAM,SAAS,EAAC,YAAY,kBAAG,YAAY,CAAC,SAAS,IAAQ,IAC5D,CACJ,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC,CACrC,eAAM,SAAS,EAAC,YAAY,sBAAa,CAC1C,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,CACvC,eAAM,SAAS,EAAC,WAAW,wBAAe,CAC3C,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,GACG,CACP,EACA,YAAY,IACT,EACL,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,0BAA0B,CAAC;AAEpD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FileHeader.js","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/FileHeader/FileHeader.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ui/GitDiffViewer/common/FileHeader/styles.css

@@ -42,33 +42,14 @@
         background-color: var(--git-diff-file-header-button-focus-background);
       }
 
-      &.collapsed {
+      > svg {
         transform: rotate(90deg);
+        transition: transform 0.15s ease-out;
       }
-    }
-  }
-
-  & > .right-content {
-    & > .change-count {
-      font-size: 12px;
-      font-weight: 550;
-      line-height: 16px;
-      display: flex;
-      align-items: center;
-
-      & > .insertions,
-      & > .deletions {
-        padding: 0 4px;
-        display: flex;
-        align-items: center;
-      }
-      & > .insertions {
-        background-color: var(--git-diff-file-header-insertion-background);
-        color: var(--git-diff-file-header-insertion-color);
-      }
-      & > .deletions {
-        background-color: var(--git-diff-file-header-deletion-background);
-        color: var(--git-diff-file-header-deletion-color);
+      &.collapsed {
+        > svg {
+          transform: rotate(0deg);
+        }
       }
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/GitDiffViewer/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,cAAc,kBAAkB,CAAC;AAEjC,cAAc,kBAAkB,CAAC;AAEjC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/D,MAAM,CAAC,MAAM,aAAa,GAAG,QAAkC,CAAC;AAChE,aAAa,CAAC,UAAU,GAAG,UAAU,CAAC;AACtC,aAAa,CAAC,cAAc,GAAG,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/GitDiffViewer/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,cAAc,kBAAkB,CAAC;AAEjC,cAAc,kBAAkB,CAAC;AAEjC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/D,MAAM,CAAC,MAAM,aAAa,GAAG,QAG5B,CAAC;AACF,aAAa,CAAC,UAAU,GAAG,UAAU,CAAC;AACtC,aAAa,CAAC,cAAc,GAAG,cAAc,CAAC"}

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

@@ -1,18 +1,17 @@
 /* GitDiffViewer.css */
 .ds.git-diff-viewer {
   --git-diff-viewer-code-default-background: #f7f7f7;
-  --git-diff-viewer-code-default-color: #636363;
+  --git-diff-viewer-code-default-color: #000000;
+  --git-diff-viewer-code-line-number-default-color: #707070;
   --git-diff-viewer-code-insertion-background: #dff1e2;
-  --git-diff-viewer-code-insertion-color: #8cd297;
   --git-diff-viewer-code-deletion-background: #f8e8ea;
-  --git-diff-viewer-code-deletion-color: #fba1aa;
 
   --git-diff-viewer-border-color: rgba(0, 0, 0, 0.2);
   --git-diff-viewer-border-color-tinted: rgba(0, 0, 0, 0.1);
 
   --git-diff-viewer-gutter-width: 7.5em;
   --git-diff-viewer-hunk-header-background: #ffffff;
-  --git-diff-viewer-hunk-header-color: rgba(0, 0, 0, 0.6);
+  --git-diff-viewer-hunk-header-color: #707070;
 
   --git-diff-file-header-horizontal-padding: 1em;
   --git-diff-file-header-vertical-padding: 0.4em;
@@ -23,16 +22,5 @@
   --git-diff-file-header-button-hover-background: rgba(0, 0, 0, 0.1);
   --git-diff-file-header-button-focus-background: rgba(0, 0, 0, 0.1);
 
-  --git-diff-file-header-insertion-background: rgba(10, 189, 37, 0.1);
-  --git-diff-file-header-insertion-color: var(
-    --git-diff-viewer-code-insertion-color,
-    #8cd297
-  );
-  --git-diff-file-header-deletion-background: rgba(255, 102, 120, 0.1);
-  --git-diff-file-header-deletion-color: var(
-    --git-diff-viewer-code-deletion-color,
-    #fba1aa
-  );
-
   border: 1px solid var(--git-diff-viewer-border-color);
 }

package/dist/esm/ui/GitDiffViewer/utils/highlightDiffHunkLines.js

@@ -0,0 +1,52 @@
+import hljs from "highlight.js";
+function highlight(code, fileExtension) {
+    const formattedFileExtension = fileExtension?.toLowerCase();
+    if (!formattedFileExtension) {
+        return hljs.highlightAuto(code).value;
+    }
+    const languages = hljs.listLanguages();
+    for (const language of languages) {
+        const languageDefinition = hljs.getLanguage(language);
+        if (language.toLowerCase() === formattedFileExtension ||
+            languageDefinition?.aliases?.some((alias) => alias.toLowerCase() === formattedFileExtension)) {
+            return hljs.highlight(code, { language }).value;
+        }
+    }
+    // Fall back to auto-detection if no match found
+    return hljs.highlightAuto(code).value;
+}
+function highlightDiffHunkLines(filePath, hunkLines) {
+    const fileExtension = filePath.split(".").pop();
+    const hunkContentAddedVersion = hunkLines
+        .filter((line) => line.type === "add" || line.type === "context")
+        .map((line) => line.content)
+        .join("\n");
+    const hunkContentDeletedVersion = hunkLines
+        .filter((line) => line.type === "remove" || line.type === "context")
+        .map((line) => line.content)
+        .join("\n");
+    const highlightedHunkAddedVersion = highlight(hunkContentAddedVersion, fileExtension).split("\n");
+    const highlightedHunkDeletedVersion = highlight(hunkContentDeletedVersion, fileExtension).split("\n");
+    const highlightedLines = [];
+    let addedOffset = 0;
+    let removedOffset = 0;
+    for (let i = 0; i < hunkLines.length; i++) {
+        const line = hunkLines[i];
+        switch (line.type) {
+            case "context":
+                highlightedLines.push(highlightedHunkDeletedVersion[i - addedOffset]);
+                break;
+            case "remove":
+                highlightedLines.push(highlightedHunkDeletedVersion[i - addedOffset]);
+                removedOffset++;
+                break;
+            case "add":
+                highlightedLines.push(highlightedHunkAddedVersion[i - removedOffset]);
+                addedOffset++;
+                break;
+        }
+    }
+    return highlightedLines;
+}
+export default highlightDiffHunkLines;
+//# sourceMappingURL=highlightDiffHunkLines.js.map

package/dist/esm/ui/GitDiffViewer/utils/highlightDiffHunkLines.js.map

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

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

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

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

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

package/dist/esm/ui/GitDiffViewer/utils/parseGitDiff.js

@@ -3,12 +3,14 @@ function parseGitDiff(diffText) {
     const files = [];
     let currentFile = null;
     let currentHunk = null;
+    let currentDiffStart = 0;
     // Regular expressions to match file and hunk headers
     const fileRegex = /^diff --git a\/(.+) b\/(.+)$/;
     const hunkRegex = /^@@ -(\d+),?(\d*) \+(\d+),?(\d*) @@/;
     const oldFileRegex = /^--- (.+)$/;
     const newFileRegex = /^\+\+\+ (.+)$/;
     for (const line of lines) {
+        currentDiffStart++;
         const fileMatch = line.match(fileRegex);
         if (fileMatch) {
             // New file diff start
@@ -42,13 +44,33 @@ function parseGitDiff(diffText) {
         }
         const hunkMatch = line.match(hunkRegex);
         if (hunkMatch && currentFile) {
+            const hunkPositions = [
+                Number.parseInt(hunkMatch[1]),
+                hunkMatch[2] ? Number.parseInt(hunkMatch[2]) : 1,
+                Number.parseInt(hunkMatch[3]),
+                hunkMatch[4] ? Number.parseInt(hunkMatch[4]) : 1,
+            ];
+            const oldPos = {
+                start: hunkPositions[0],
+                end: hunkPositions[0] + hunkPositions[1],
+            };
+            const newPos = {
+                start: hunkPositions[2],
+                end: hunkPositions[2] + hunkPositions[3],
+            };
+            const diffPos = {
+                // +1 because the first line is the hunk header
+                start: currentDiffStart + 1,
+                end: currentDiffStart + 1,
+            };
             // New hunk start
             currentHunk = {
                 header: line,
-                oldStart: Number.parseInt(hunkMatch[1], 10),
-                oldLines: hunkMatch[2] ? Number.parseInt(hunkMatch[2], 10) : 1,
-                newStart: Number.parseInt(hunkMatch[3], 10),
-                newLines: hunkMatch[4] ? Number.parseInt(hunkMatch[4], 10) : 1,
+                positions: {
+                    old: oldPos,
+                    new: newPos,
+                    diff: diffPos,
+                },
                 lines: [],
             };
             currentFile.hunks.push(currentHunk);
@@ -63,6 +85,7 @@ function parseGitDiff(diffText) {
                     : "context";
             const content = line.slice(1); // Remove the leading +, - or space
             currentHunk.lines.push({ type, content });
+            currentHunk.positions.diff.end++;
         }
     }
     if (currentFile)

package/dist/esm/ui/GitDiffViewer/utils/parseGitDiff.js.map

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

package/dist/esm/ui/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import hljs from "highlight.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import "../GitDiffViewer/common/CodeDiffViewer/HighlighTheme.css";
+import { Toolbar, ViewModeTabs, icons, } from "./common/index.js";
+import { useEditor } from "./hooks/index.js";
+import "./styles.css";
+("react-markdown");
+const componentCssClassName = "ds markdown-editor";
+const borderCssClassName = "bordered";
+/**
+ * A dual-mode Markdown editor for writing and previewing Markdown content.
+ */
+const MarkdownEditor = forwardRef(({ id, className, style, textareaStyle, previewStyle, defaultValue, placeholder, hideToolbar = false, hidePreview = false, previewSwitchMode = "tab", borderless = false, editMode: controlledEditMode, onEditModeChange: controlledOnEditModeChange, emptyInputMessage = "No content", toolbarBarLabelMessage = "Markdown Editor", ToolbarTextFormattingGroupLabelMessage = "Text Formatting", ToolbarToolsGroupLabelMessage = "Tools", ToolbarTitleButtonLabelMessage = "Title", ToolbarBoldButtonLabelMessage = "Bold", ToolbarItalicButtonLabelMessage = "Italic", ToolbarQuoteButtonLabelMessage = "Quote", ToolbarCodeButtonLabelMessage = "Code", ToolbarLinkButtonLabelMessage = "Link", ToolbarUnorderedListButtonLabelMessage = "Unordered List", ToolbarOrderedListButtonLabelMessage = "Ordered List", ...textareaProps }, ref) => {
+    const textareaRef = useRef(null);
+    const previewRef = useRef(null);
+    const [internalEditMode, setInternalEditMode] = useState("write");
+    const [shouldFocusTextarea, setShouldFocusTextarea] = useState(false);
+    const { toolbar } = useEditor(textareaRef);
+    const editMode = useMemo(() => {
+        return controlledEditMode ?? internalEditMode;
+    }, [controlledEditMode, internalEditMode]);
+    const handleEditModeChange = useCallback((newEditMode, eventType) => {
+        if (controlledOnEditModeChange) {
+            controlledOnEditModeChange(newEditMode);
+        }
+        else {
+            setInternalEditMode(newEditMode);
+        }
+        // Set flag to focus textarea when switching to write mode after click
+        if (eventType === "click" && newEditMode === "write") {
+            setShouldFocusTextarea(true);
+        }
+    }, [controlledOnEditModeChange]);
+    useImperativeHandle(ref, () => textareaRef.current);
+    // Focus textarea when edit mode changes to "write"
+    useEffect(() => {
+        if (editMode === "write" && shouldFocusTextarea) {
+            // Use a small timeout to ensure DOM has updated
+            const focusTimeout = setTimeout(() => {
+                if (textareaRef.current) {
+                    textareaRef.current.focus();
+                }
+                setShouldFocusTextarea(false);
+            }, 10);
+            return () => clearTimeout(focusTimeout);
+        }
+    }, [editMode, shouldFocusTextarea]);
+    useEffect(() => {
+        if (previewRef.current && editMode === "preview") {
+            for (const codeBlock of Array.from(previewRef.current.querySelectorAll("pre code"))) {
+                if (!codeBlock.dataset.highlighted) {
+                    hljs.highlightElement(codeBlock);
+                }
+            }
+        }
+    }, [editMode]);
+    return (_jsxs("div", { id: id, style: style, className: [
+            componentCssClassName,
+            className,
+            !borderless && borderCssClassName,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsxs("div", { className: "top-bar", children: [!hidePreview && previewSwitchMode === "tab" && (_jsx(ViewModeTabs, { editMode: editMode, onEditModeChange: handleEditModeChange })), !hideToolbar && toolbar && (_jsxs(Toolbar, { label: toolbarBarLabelMessage, children: [_jsxs(Toolbar.Group, { label: ToolbarTextFormattingGroupLabelMessage, children: [_jsx(Toolbar.Button, { label: ToolbarTitleButtonLabelMessage, onClick: toolbar.title.handler, shortcut: toolbar.title.shortcut, children: icons.ToolbarTitle }), _jsx(Toolbar.Button, { label: ToolbarBoldButtonLabelMessage, onClick: toolbar.bold.handler, shortcut: toolbar.bold.shortcut, children: icons.ToolbarBold }), _jsx(Toolbar.Button, { label: ToolbarItalicButtonLabelMessage, onClick: toolbar.italic.handler, shortcut: toolbar.italic.shortcut, children: icons.ToolbarItalic })] }), _jsx(Toolbar.Separator, {}), _jsxs(Toolbar.Group, { label: ToolbarToolsGroupLabelMessage, children: [_jsx(Toolbar.Button, { label: ToolbarQuoteButtonLabelMessage, onClick: toolbar.quote.handler, shortcut: toolbar.quote.shortcut, children: icons.ToolbarQuote }), _jsx(Toolbar.Button, { label: ToolbarCodeButtonLabelMessage, onClick: toolbar.code.handler, shortcut: toolbar.code.shortcut, children: icons.ToolbarCode }), _jsx(Toolbar.Button, { label: ToolbarLinkButtonLabelMessage, onClick: toolbar.link.handler, shortcut: toolbar.link.shortcut, children: icons.ToolbarLink }), _jsx(Toolbar.Button, { label: ToolbarUnorderedListButtonLabelMessage, onClick: toolbar.uList.handler, shortcut: toolbar.uList.shortcut, children: icons.ToolbarUnorderedList }), _jsx(Toolbar.Button, { label: ToolbarOrderedListButtonLabelMessage, onClick: toolbar.oList.handler, shortcut: toolbar.oList.shortcut, children: icons.ToolbarOrderedList })] })] })), !hidePreview && previewSwitchMode === "checkbox" && (_jsxs("div", { className: "preview-switch", children: [_jsx("input", { type: "checkbox", id: `${id}-preview-switch`, checked: editMode === "preview", onChange: (e) => {
+                                    handleEditModeChange(e.target.checked ? "preview" : "write", "click");
+                                } }), _jsx("label", { htmlFor: `${id}-preview-switch`, children: "Preview" })] }))] }), _jsx("textarea", { defaultValue: defaultValue, placeholder: placeholder, className: "editor-content", ref: textareaRef, hidden: editMode !== "write", style: textareaStyle, ...textareaProps }), editMode === "preview" && (_jsx("div", { className: "editor-content", style: previewStyle, ref: previewRef, children: _jsx(ReactMarkdown, { rehypePlugins: [rehypeSanitize], remarkPlugins: [remarkGfm], components: {
+                        h1: ({ children }) => _jsx("h3", { children: children }),
+                        h2: ({ children }) => _jsx("h3", { children: children }),
+                    }, children: textareaRef.current?.value || defaultValue || emptyInputMessage }) }))] }));
+});
+export default MarkdownEditor;
+//# sourceMappingURL=MarkdownEditor.js.map

package/dist/esm/ui/MarkdownEditor/MarkdownEditor.js.map

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

package/dist/esm/ui/MarkdownEditor/common/Toolbar/Toolbar.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "./common/index.js";
+import "./styles.css";
+const componentCssClassName = "ds toolbar";
+/**
+ * A horizontal container that groups related controls in a toolbar.
+ */
+const Toolbar = (({ id, children, className, style, label }) => {
+    const toolbarRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reapply tabindex when children change
+    useEffect(() => {
+        if (!toolbarRef.current)
+            return;
+        const buttons = Array.from(toolbarRef.current.querySelectorAll("button"));
+        for (const button of buttons) {
+            button.setAttribute("tabindex", "-1");
+        }
+        const firstNode = buttons[0];
+        if (firstNode)
+            firstNode.setAttribute("tabindex", "0");
+    }, [children]);
+    const handleKeyDown = (event) => {
+        if (!toolbarRef.current)
+            return;
+        const target = event.target;
+        if (target.tagName !== "BUTTON")
+            return;
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            const buttons = Array.from(toolbarRef.current.querySelectorAll("button") ?? []);
+            const direction = event.key === "ArrowLeft" ? -1 : 1;
+            const currentIndex = buttons.indexOf(target);
+            let nextIndex = currentIndex + direction;
+            if (nextIndex < 0)
+                nextIndex = buttons.length - 1;
+            if (nextIndex >= buttons.length)
+                nextIndex = 0;
+            const currentButton = buttons[currentIndex];
+            const nextButton = buttons[nextIndex];
+            currentButton.setAttribute("tabindex", "-1");
+            nextButton.setAttribute("tabindex", "0");
+            nextButton.focus();
+        }
+    };
+    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), "aria-label": label, role: "toolbar", "aria-orientation": "horizontal", ref: toolbarRef, onKeyDown: handleKeyDown, children: children }));
+});
+Toolbar.Group = ToolbarGroup;
+Toolbar.Button = ToolbarButton;
+Toolbar.Separator = ToolbarSeparator;
+export default Toolbar;
+//# sourceMappingURL=Toolbar.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/Toolbar.js.map

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