@pierre/diffs 1.5.2 → 1.6.0

package/dist/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../src/style.css?inline"],"sourcesContent":["@layer base, theme, rendered, unsafe;\n\n@layer base {\n  :host {\n    --diffs-font-fallback:\n      'SF Mono', Monaco, Consolas, 'Ubuntu Mono', 'Liberation Mono',\n      'Courier New', monospace;\n    --diffs-header-font-fallback:\n      system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',\n      'Noto Sans', 'Liberation Sans', Arial, sans-serif;\n\n    --diffs-mixer: light-dark(black, white);\n    --diffs-gap-fallback: 8px;\n    --diffs-scrollbar-gutter-fallback: 6px;\n    --diffs-scrollbar-gutter: var(\n      --diffs-scrollbar-gutter-override,\n      var(\n        --diffs-scrollbar-gutter-measured,\n        var(--diffs-scrollbar-gutter-fallback)\n      )\n    );\n\n    --diffs-added-light: #0dbe4e;\n    --diffs-added-dark: #5ecc71;\n    --diffs-modified-light: #009fff;\n    --diffs-modified-dark: #69b1ff;\n    --diffs-deleted-light: #ff2e3f;\n    --diffs-deleted-dark: #ff6762;\n    --diffs-warning-light: #d5a910;\n    --diffs-warning-dark: #ffd452;\n\n    /*\n    // Available CSS Color Overrides\n    --diffs-bg-buffer-override\n    --diffs-bg-hover-override\n    --diffs-bg-context-override\n    --diffs-bg-context-gutter-override\n    --diffs-bg-separator-override\n    --diffs-bg-caret-override\n\n    --diffs-fg-number-override\n    --diffs-fg-number-addition-override\n    --diffs-fg-number-deletion-override\n    --diffs-fg-conflict-marker-override\n\n    --diffs-deletion-color-override\n    --diffs-addition-color-override\n    --diffs-modified-color-override\n\n    --diffs-bg-deletion-override\n    --diffs-bg-deletion-number-override\n    --diffs-bg-deletion-emphasis-override\n\n    --diffs-bg-addition-override\n    --diffs-bg-addition-number-override\n    --diffs-bg-addition-emphasis-override\n\n    --conflict-bg-current-override\n    --conflict-bg-current-number-override\n    --conflict-bg-current-header-override\n    --conflict-bg-incoming-override\n    --conflict-bg-incoming-number-override\n    --conflict-bg-incoming-header-override\n\n    // Line Selection Color Overrides (for enableLineSelection)\n    --diffs-selection-color-override\n    --diffs-bg-selection-override\n    --diffs-bg-selection-number-override\n\n    // Available CSS Layout Overrides\n    --diffs-gap-inline\n    --diffs-gap-block\n    --diffs-gap-style\n    --diffs-scrollbar-gutter-override\n    --diffs-tab-size\n    --diffs-popover-gap (edit mode: inset for edge-clamped popovers)\n    */\n\n    color-scheme: light dark;\n    display: block;\n    font-family: var(\n      --diffs-header-font-family,\n      var(--diffs-header-font-fallback)\n    );\n    font-size: var(--diffs-font-size, 13px);\n    line-height: var(--diffs-line-height, 20px);\n    font-feature-settings: var(--diffs-font-features);\n\n    /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n     * and vscode use an older build of chrome that appears to have a bug with\n     * color-mix and 'in oklch', so use 'in lab' instead */\n    --diffs-bg: light-dark(\n      var(--diffs-light-bg, #fff),\n      var(--diffs-dark-bg, #000)\n    );\n    --diffs-bg-buffer: var(\n      --diffs-bg-buffer-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)),\n        color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))\n      )\n    );\n    --diffs-bg-context: var(\n      --diffs-bg-context-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 98.5%, var(--diffs-mixer)),\n        color-mix(in lab, var(--diffs-bg) 92.5%, var(--diffs-mixer))\n      )\n    );\n    --diffs-bg-context-gutter: var(\n      --diffs-bg-context-gutter-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg-context) 90%, var(--diffs-bg)),\n        color-mix(in lab, var(--diffs-bg-context) 45%, var(--diffs-bg))\n      )\n    );\n    --diffs-bg-separator: var(\n      --diffs-bg-separator-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)),\n        color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))\n      )\n    );\n\n    --diffs-fg: light-dark(var(--diffs-light, #000), var(--diffs-dark, #fff));\n    --diffs-fg-number: var(\n      --diffs-fg-number-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)),\n        color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))\n      )\n    );\n    --diffs-fg-conflict-marker: var(\n      --diffs-fg-conflict-marker-override,\n      var(--diffs-fg-number)\n    );\n\n    --diffs-deletion-base: var(\n      --diffs-deletion-color-override,\n      light-dark(\n        var(\n          --diffs-light-deletion-color,\n          var(--diffs-deletion-color, var(--diffs-deleted-light))\n        ),\n        var(\n          --diffs-dark-deletion-color,\n          var(--diffs-deletion-color, var(--diffs-deleted-dark))\n        )\n      )\n    );\n    --diffs-addition-base: var(\n      --diffs-addition-color-override,\n      light-dark(\n        var(\n          --diffs-light-addition-color,\n          var(--diffs-addition-color, var(--diffs-added-light))\n        ),\n        var(\n          --diffs-dark-addition-color,\n          var(--diffs-addition-color, var(--diffs-added-dark))\n        )\n      )\n    );\n    --diffs-modified-base: var(\n      --diffs-modified-color-override,\n      light-dark(\n        var(\n          --diffs-light-modified-color,\n          var(--diffs-modified-color, var(--diffs-modified-light))\n        ),\n        var(\n          --diffs-dark-modified-color,\n          var(--diffs-modified-color, var(--diffs-modified-dark))\n        )\n      )\n    );\n\n    /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n   * and vscode use an older build of chrome that appears to have a bug with\n   * color-mix and 'in oklch', so use 'in lab' instead */\n    --diffs-bg-deletion: var(\n      --diffs-bg-deletion-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)),\n        color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base))\n      )\n    );\n    --diffs-bg-deletion-emphasis: var(\n      --diffs-bg-deletion-emphasis-override,\n      light-dark(\n        rgb(from var(--diffs-deletion-base) r g b / 0.15),\n        rgb(from var(--diffs-deletion-base) r g b / 0.2)\n      )\n    );\n\n    --diffs-bg-addition: var(\n      --diffs-bg-addition-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)),\n        color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base))\n      )\n    );\n    --diffs-bg-addition-emphasis: var(\n      --diffs-bg-addition-emphasis-override,\n      light-dark(\n        rgb(from var(--diffs-addition-base) r g b / 0.15),\n        rgb(from var(--diffs-addition-base) r g b / 0.2)\n      )\n    );\n\n    --diffs-selection-base: var(--diffs-modified-base);\n    --diffs-selection-number-fg: light-dark(\n      color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)),\n      color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer))\n    );\n    background-color: var(--diffs-bg);\n    color: var(--diffs-fg);\n  }\n\n  /* NOTE(mdo): Some semantic HTML elements (e.g. `pre`, `code`) have default\n * user-agent styles. These must be overridden to use our custom styles. */\n  pre,\n  code,\n  [data-error-wrapper] {\n    isolation: isolate;\n    margin: 0;\n    padding: 0;\n    display: block;\n    outline: none;\n    font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n  }\n\n  pre,\n  code {\n    background-color: var(--diffs-bg);\n  }\n\n  code {\n    contain: content;\n  }\n\n  input,\n  button {\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  [data-icon-sprite] {\n    display: none;\n  }\n\n  /* NOTE(mdo): Headers and separators are within pre/code, so we need to reset\n   * their font-family explicitly. */\n  [data-diffs-header],\n  [data-separator] {\n    font-family: var(\n      --diffs-header-font-family,\n      var(--diffs-header-font-fallback)\n    );\n  }\n\n  [data-diffs-header][data-sticky] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: var(--diffs-bg);\n  }\n\n  [data-file-info] {\n    padding: 10px;\n    font-weight: 700;\n    color: var(--fg);\n    /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n   * and vscode use an older build of chrome that appears to have a bug with\n   * color-mix and 'in oklch', so use 'in lab' instead */\n    background-color: color-mix(in lab, var(--bg) 98%, var(--fg));\n    border-block: 1px solid color-mix(in lab, var(--bg) 95%, var(--fg));\n  }\n\n  [data-diff],\n  [data-file] {\n    /* This feels a bit crazy to me... so I need to think about it a bit more... */\n    --diffs-grid-number-column-width: minmax(min-content, max-content);\n    --diffs-code-grid: var(--diffs-grid-number-column-width) 1fr;\n\n    &[data-dehydrated] {\n      --diffs-code-grid: var(--diffs-grid-number-column-width) minmax(0, 1fr);\n    }\n\n    &:hover [data-code]::-webkit-scrollbar-thumb {\n      background-color: var(--diffs-bg-context);\n    }\n  }\n\n  /* iOS WebKit uses overlay scrollbars, so unmeasured layout compensation\n   * should start at zero rather than the desktop custom-scrollbar fallback. */\n  @supports (-webkit-touch-callout: none) {\n    :host {\n      --diffs-scrollbar-gutter-fallback: 0px;\n    }\n  }\n\n  [data-line] span,\n  [data-edit-prediction-suffix] span {\n    color: light-dark(\n      var(--diffs-token-light, var(--diffs-light)),\n      var(--diffs-token-dark, var(--diffs-dark))\n    );\n    background-color: light-dark(\n      var(--diffs-token-light-bg, inherit),\n      var(--diffs-token-dark-bg, inherit)\n    );\n    font-weight: light-dark(\n      var(--diffs-token-light-font-weight, inherit),\n      var(--diffs-token-dark-font-weight, inherit)\n    );\n    font-style: light-dark(\n      var(--diffs-token-light-font-style, inherit),\n      var(--diffs-token-dark-font-style, inherit)\n    );\n    text-decoration: light-dark(\n      var(--diffs-token-light-text-decoration, inherit),\n      var(--diffs-token-dark-text-decoration, inherit)\n    );\n  }\n\n  /* Line Color and BG Calculations */\n  [data-line],\n  [data-gutter-buffer],\n  [data-column-number],\n  [data-line-annotation],\n  [data-no-newline],\n  [data-merge-conflict],\n  [data-merge-conflict-actions],\n  [data-editor-overlay] {\n    /* Pre-fill css variables for appropriate up-mixing */\n    --diffs-computed-decoration-bg: var(--diffs-bg);\n    --diffs-computed-diff-line-bg: var(--diffs-computed-decoration-bg);\n    --diffs-computed-selected-line-bg: var(--diffs-computed-diff-line-bg);\n    --diffs-computed-editor-active-line-bg: var(\n      --diffs-computed-selected-line-bg\n    );\n    --diffs-computed-hovered-line-bg: var(\n      --diffs-computed-editor-active-line-bg\n    );\n\n    --diffs-hover-mix-target: var(\n      --diffs-bg-hover-override,\n      var(--diffs-mixer)\n    );\n    --diffs-line-bg: var(--diffs-computed-hovered-line-bg);\n\n    color: var(--diffs-fg);\n    background-color: var(--diffs-line-bg, var(--diffs-bg));\n  }\n\n  [data-line],\n  [data-no-newline] {\n    &[data-decoration-bg] {\n      --mix-deco-light: 92%;\n      --mix-deco-dark: 85%;\n\n      &[data-decoration-bg-depth='2'] {\n        --mix-deco-light: 88%;\n        --mix-deco-dark: 80%;\n      }\n\n      &[data-decoration-bg-depth='3'] {\n        --mix-deco-light: 85%;\n        --mix-deco-dark: 78%;\n      }\n\n      --diffs-hover-mix-target: var(--diffs-decoration-bg);\n\n      --diffs-computed-decoration-bg: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-bg) var(--mix-deco-light),\n          var(--diffs-decoration-bg)\n        ),\n        color-mix(\n          in lab,\n          var(--diffs-bg) var(--mix-deco-dark),\n          var(--diffs-decoration-bg)\n        )\n      );\n    }\n  }\n\n  [data-line-annotation],\n  [data-gutter-buffer='annotation'] {\n    --diffs-annotation-bg: var(--diffs-bg-context);\n    --diffs-computed-decoration-bg: var(--diffs-annotation-bg);\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-merge-conflict-actions],\n  [data-gutter-buffer='merge-conflict-action'],\n  [data-gutter-buffer='merge-conflict-marker-base'],\n  [data-gutter-buffer='merge-conflict-marker-separator'],\n  [data-merge-conflict='marker-base'],\n  [data-merge-conflict='marker-separator'] {\n    --diffs-computed-decoration-bg: var(--diffs-bg-context);\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-gutter-buffer='merge-conflict-marker-start'],\n  [data-merge-conflict='marker-start'] {\n    --diffs-computed-decoration-bg: light-dark(\n      color-mix(\n        in lab,\n        var(--diffs-bg) 78%,\n        var(--conflict-bg-current-header-override, var(--diffs-addition-base))\n      ),\n      color-mix(\n        in lab,\n        var(--diffs-bg) 68%,\n        var(--conflict-bg-current-header-override, var(--diffs-addition-base))\n      )\n    );\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-gutter-buffer='merge-conflict-marker-end'],\n  [data-merge-conflict='marker-end'] {\n    --diffs-computed-decoration-bg: light-dark(\n      color-mix(\n        in lab,\n        var(--diffs-bg) 78%,\n        var(--conflict-bg-incoming-header-override, var(--diffs-modified-base))\n      ),\n      color-mix(\n        in lab,\n        var(--diffs-bg) 68%,\n        var(--conflict-bg-incoming-header-override, var(--diffs-modified-base))\n      )\n    );\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-has-merge-conflict] [data-line-annotation],\n  [data-has-merge-conflict] [data-gutter-buffer='annotation'] {\n    --diffs-computed-decoration-bg: var(--diffs-bg);\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  /* We are using where here to not affect the nesting impacts later on for\n   * hover and selection */\n  :where([data-background]) {\n    [data-gutter-buffer],\n    [data-column-number] {\n      --mix-light: 91%;\n      --mix-dark: 85%;\n    }\n\n    [data-line],\n    [data-no-newline] {\n      --mix-light: 88%;\n      --mix-dark: 80%;\n    }\n\n    [data-gutter-buffer],\n    [data-column-number],\n    [data-line],\n    [data-no-newline] {\n      --diffs-diff-line-mix-target: var(--diffs-bg);\n\n      &[data-line-type='change-deletion'] {\n        --diffs-diff-line-mix-target: var(\n          --diffs-bg-deletion-override,\n          var(--diffs-deletion-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(\n            --diffs-fg-number-deletion-override,\n            var(--diffs-deletion-base)\n          );\n\n          --diffs-diff-line-mix-target: var(\n            --diffs-bg-deletion-number-override,\n            var(--diffs-deletion-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n\n      &[data-line-type='change-addition'] {\n        --diffs-diff-line-mix-target: var(\n          --diffs-bg-addition-override,\n          var(--diffs-addition-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(\n            --diffs-fg-number-addition-override,\n            var(--diffs-addition-base)\n          );\n\n          --diffs-diff-line-mix-target: var(\n            --diffs-bg-addition-number-override,\n            var(--diffs-addition-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n\n      &[data-merge-conflict='current'] {\n        --diffs-diff-line-mix-target: var(\n          --conflict-bg-current-override,\n          var(--diffs-addition-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(\n            --diffs-fg-number-addition-override,\n            var(--diffs-addition-base)\n          );\n\n          --diffs-diff-line-mix-target: var(\n            --conflict-bg-current-number-override,\n            var(--diffs-addition-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n\n      &[data-merge-conflict='incoming'] {\n        --diffs-diff-line-mix-target: var(\n          --conflict-bg-incoming-override,\n          var(--diffs-modified-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(--diffs-modified-base);\n\n          --diffs-diff-line-mix-target: var(\n            --conflict-bg-incoming-number-override,\n            var(--diffs-modified-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n    }\n  }\n\n  /* Order is important for rationalizing these selectors and for order of\n   * application, therefore we need to disable this style-lint rule */\n  /* stylelint-disable-next-line no-duplicate-selectors */\n  [data-gutter-buffer],\n  [data-column-number],\n  [data-line],\n  [data-line-annotation],\n  [data-merge-conflict],\n  [data-merge-conflict-actions],\n  [data-no-newline],\n  [data-editor-overlay] {\n    --diffs-selection-mix-target: var(\n      --diffs-bg-selection-override,\n      var(--diffs-selection-base)\n    );\n    --diffs-selection-emphasis-mix-target: var(--diffs-selection-mix-target);\n\n    &:where([data-editor-overlay]),\n    &:where(\n        [data-line],\n        [data-line-annotation],\n        [data-merge-conflict],\n        [data-merge-conflict-actions],\n        [data-no-newline]\n      )[data-selected-line] {\n      --mix-selection-light: 82%;\n      --mix-selection-dark: 75%;\n      --diffs-hover-mix-target: var(--diffs-selection-mix-target);\n    }\n\n    &:where(\n      [data-gutter-buffer][data-selected-line],\n      [data-column-number]:is([data-selected-line], [data-editor-active-line])\n    ) {\n      --mix-selection-light: 75%;\n      --mix-selection-dark: 60%;\n      --diffs-selection-mix-target: var(\n        --diffs-bg-selection-number-override,\n        var(--diffs-selection-base)\n      );\n      --diffs-hover-mix-target: var(--diffs-selection-mix-target);\n    }\n\n    /* Keep the light-theme emphasis on a selected changed line tied to its\n     * resolved diff and selection colors. */\n    &:where([data-line][data-selected-line]):is(\n        [data-line-type='change-addition'],\n        [data-line-type='change-deletion']\n      ) {\n      --diffs-selection-emphasis-mix-target: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-diff-line-mix-target, var(--diffs-selection-mix-target))\n            var(--mix-selection-light),\n          var(--diffs-selection-mix-target)\n        ),\n        var(--diffs-selection-mix-target)\n      );\n    }\n\n    &:where([data-editor-overlay]),\n    &[data-selected-line] {\n      --diffs-computed-selected-line-bg: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-computed-diff-line-bg) var(--mix-selection-light),\n          var(--diffs-selection-mix-target)\n        ),\n        color-mix(\n          in lab,\n          var(--diffs-computed-diff-line-bg) var(--mix-selection-dark),\n          var(--diffs-selection-mix-target)\n        )\n      );\n    }\n  }\n\n  /* The editor's active line sits above selection, but hover remains the final\n   * line-background treatment. */\n  [data-line][data-editor-active-line],\n  [data-column-number][data-editor-active-line] {\n    --diffs-computed-editor-active-line-bg: color-mix(\n      in lab,\n      var(--diffs-computed-selected-line-bg)\n        var(--diffs-editor-active-line-source-mix, 100%),\n      var(--diffs-selection-emphasis-mix-target)\n    );\n  }\n\n  @media (pointer: fine) {\n    [data-line][data-hovered],\n    [data-gutter-buffer][data-hovered],\n    [data-column-number][data-hovered],\n    [data-line-annotation][data-hovered],\n    [data-no-newline][data-hovered],\n    [data-merge-conflict][data-hovered],\n    [data-merge-conflict-actions][data-hovered],\n    [data-editor-overlay][data-hovered] {\n      --diffs-computed-hovered-line-bg: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-computed-editor-active-line-bg) 97%,\n          var(--diffs-hover-mix-target)\n        ),\n        color-mix(\n          in lab,\n          var(--diffs-computed-editor-active-line-bg) 91%,\n          var(--diffs-hover-mix-target)\n        )\n      );\n    }\n  }\n\n  [data-gutter-buffer][data-selected-line],\n  [data-column-number]:is([data-selected-line], [data-editor-active-line]) {\n    color: var(--diffs-selection-number-fg);\n  }\n\n  [data-no-newline] {\n    user-select: none;\n\n    span {\n      opacity: 0.6;\n    }\n  }\n\n  [data-diff-type='split'][data-overflow='scroll'] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n\n    [data-additions] {\n      border-left: 1px solid var(--diffs-bg);\n    }\n\n    [data-deletions] {\n      border-right: 1px solid var(--diffs-bg);\n    }\n  }\n\n  [data-code] {\n    display: grid;\n    grid-auto-flow: dense;\n    grid-template-columns: var(--diffs-code-grid);\n    overflow: var(--diffs-overflow-override, scroll) clip;\n    overscroll-behavior-x: none;\n    tab-size: var(--diffs-tab-size, 2);\n    align-self: flex-start;\n    padding-top: var(--diffs-gap-block, var(--diffs-gap-fallback));\n    padding-bottom: max(\n      0px,\n      calc(\n        var(--diffs-gap-block, var(--diffs-gap-fallback)) -\n          var(--diffs-scrollbar-gutter)\n      )\n    );\n    scrollbar-gutter: stable;\n  }\n\n  [data-diffs-scrollbar-measure] {\n    position: absolute;\n    top: -200px;\n    left: -200px;\n    opacity: 0;\n    pointer-events: none;\n    width: 100px;\n    height: 100px;\n    padding: 0;\n    grid-template-columns: none;\n    scrollbar-gutter: auto;\n  }\n\n  [data-container-size] {\n    container-type: inline-size;\n  }\n\n  [data-code]::-webkit-scrollbar {\n    width: 0;\n    height: var(--diffs-scrollbar-gutter);\n  }\n\n  [data-code]::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  [data-code]::-webkit-scrollbar-thumb {\n    background-color: transparent;\n    border: 1px solid transparent;\n    background-clip: content-box;\n    border-radius: 3px;\n  }\n\n  [data-code]::-webkit-scrollbar-corner {\n    background-color: transparent;\n  }\n\n  /*\n   * If we apply these rules globally it will mean that webkit will opt into the\n   * standards compliant version of custom css scrollbars, which we do not want\n   * because the custom stuff will look better\n  */\n  @supports (-moz-appearance: none) {\n    [data-code] {\n      scrollbar-width: thin;\n      scrollbar-color: var(--diffs-bg-context) transparent;\n      padding-bottom: var(--diffs-gap-block, var(--diffs-gap-fallback));\n    }\n  }\n\n  [data-diffs-header] ~ [data-diff],\n  [data-diffs-header] ~ [data-file] {\n    [data-code],\n    &[data-overflow='wrap'],\n    &[data-dehydrated][data-diff-type='split'][data-overflow='scroll'] {\n      padding-top: 0;\n    }\n  }\n\n  [data-gutter] {\n    display: grid;\n    grid-template-rows: subgrid;\n    grid-template-columns: subgrid;\n    grid-column: 1;\n    z-index: 3;\n    position: relative;\n    background-color: var(--diffs-bg);\n\n    [data-gutter-buffer],\n    [data-column-number] {\n      border-right: var(--diffs-gap-style, 2px solid var(--diffs-bg));\n    }\n  }\n\n  [data-content] {\n    display: grid;\n    grid-template-rows: subgrid;\n    grid-template-columns: subgrid;\n    grid-column: 2;\n    min-width: 0;\n    background-color: var(--diffs-bg);\n  }\n\n  /* Both split layouts that share one grid across the two columns: wrap\n   * always, and scroll while dehydrated. Scroll mode normally renders each\n   * column as its own scroll container, where paired annotation rows only get\n   * equal heights once the resize manager measures them — before hydration\n   * that measurement hasn't run, so the side hosting the annotation content\n   * would be taller and the rows below it would shift on hydration. The\n   * shared grid gives paired rows equal heights in pure CSS; the dehydrated\n   * scroll variant keeps nowrap text and clips horizontal overflow until\n   * hydration swaps in the real scroll containers. */\n  [data-diff-type='split'][data-overflow='wrap'],\n  [data-dehydrated][data-diff-type='split'][data-overflow='scroll'] {\n    display: grid;\n    grid-auto-flow: dense;\n    grid-template-columns: repeat(2, var(--diffs-code-grid));\n    padding-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n\n    [data-code] {\n      display: contents;\n    }\n\n    [data-deletions] {\n      [data-gutter] {\n        grid-column: 1;\n      }\n\n      [data-content] {\n        grid-column: 2;\n        border-right: 1px solid var(--diffs-bg);\n      }\n    }\n\n    [data-additions] {\n      [data-gutter] {\n        grid-column: 3;\n        border-left: 1px solid var(--diffs-bg);\n      }\n\n      [data-content] {\n        grid-column: 4;\n      }\n    }\n  }\n\n  [data-dehydrated][data-diff-type='split'][data-overflow='scroll']\n    [data-content] {\n    overflow: clip;\n  }\n\n  [data-overflow='scroll'] [data-gutter] {\n    position: sticky;\n    left: 0;\n  }\n\n  [data-interactive-lines] [data-line] {\n    cursor: pointer;\n  }\n\n  [data-interactive-line-numbers] [data-column-number] {\n    cursor: pointer;\n    touch-action: none;\n  }\n\n  [data-content-buffer],\n  [data-gutter-buffer] {\n    position: relative;\n    user-select: none;\n    min-height: 1lh;\n  }\n\n  [data-gutter-buffer] {\n    padding-left: 2ch;\n    padding-right: 1ch;\n\n    &::before {\n      content: '';\n      display: block;\n      min-width: var(\n        --diffs-min-number-column-width,\n        var(--diffs-min-number-column-width-default, 3ch)\n      );\n    }\n  }\n\n  [data-gutter-buffer='annotation'] {\n    --diffs-annotation-bg: var(--diffs-bg-context-gutter);\n    min-height: 0;\n  }\n\n  [data-gutter-buffer='buffer'] {\n    --diffs-line-bg: var(--diffs-bg-context-gutter);\n  }\n\n  [data-content-buffer] {\n    grid-column: 1;\n    /* We multiply by 1.414 (√2) to better approximate the diagonal repeat distance */\n    background-size: 8px 8px;\n    background-position: 5px 0;\n    background-origin: border-box;\n    /* This is incredibley expensive... */\n    background-image: repeating-linear-gradient(\n      -45deg,\n      transparent,\n      transparent calc(3px * 1.414),\n      var(--diffs-bg-buffer) calc(3px * 1.414),\n      var(--diffs-bg-buffer) calc(4px * 1.414)\n    );\n  }\n\n  /* Hunk Separators */\n  /* --------------- */\n  [data-separator] {\n    box-sizing: content-box;\n    background-color: var(--diffs-bg);\n  }\n\n  [data-separator='simple'] {\n    min-height: 4px;\n  }\n\n  [data-separator='line-info'],\n  [data-separator='line-info-basic'],\n  [data-separator='metadata'],\n  [data-separator='simple'] {\n    background-color: var(--diffs-bg-separator);\n  }\n\n  [data-separator='line-info'],\n  [data-separator='line-info-basic'],\n  [data-separator='metadata'] {\n    height: 32px;\n    position: relative;\n  }\n\n  [data-separator-wrapper] {\n    user-select: none;\n    fill: currentColor;\n    position: absolute;\n    inset-inline: 0;\n    display: flex;\n    align-items: center;\n    background-color: var(--diffs-bg);\n    height: 100%;\n  }\n\n  [data-content] [data-separator-wrapper] {\n    display: none;\n  }\n\n  [data-separator='metadata'] [data-separator-wrapper] {\n    inset-inline: 100% auto;\n    padding-inline: 1ch;\n    height: 100%;\n    background-color: var(--diffs-bg-separator);\n    color: var(--diffs-fg-number);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: min-content;\n  }\n\n  [data-separator='line-info'] {\n    margin-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n\n    [data-separator-wrapper] {\n      min-width: 16px;\n    }\n  }\n\n  [data-separator='line-info-basic'],\n  [data-separator='metadata'] {\n    margin-block: 0;\n  }\n\n  [data-separator='line-info'][data-separator-first] {\n    margin-top: 0;\n  }\n\n  [data-separator='line-info'][data-separator-last] {\n    margin-bottom: 0;\n  }\n\n  [data-expand-index] [data-separator-wrapper] {\n    display: grid;\n    grid-template-columns: 32px auto;\n  }\n\n  [data-expand-index] [data-separator-wrapper][data-separator-multi-button] {\n    grid-template-columns: 32px 32px auto;\n  }\n\n  [data-expand-button],\n  [data-separator-content] {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    background-color: var(--diffs-bg-separator);\n  }\n\n  [data-expand-index] [data-separator-content]:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  [data-expand-button] {\n    justify-content: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    min-width: 32px;\n    align-self: stretch;\n    color: var(--diffs-fg-number);\n    border-right: 2px solid var(--diffs-bg);\n\n    &:hover {\n      color: var(--diffs-fg);\n    }\n\n    &[data-expand-all-button] {\n      display: none;\n    }\n  }\n\n  [data-expand-down] [data-icon] {\n    transform: scaleY(-1);\n  }\n\n  [data-separator-content] {\n    flex: 1 1 auto;\n    padding: 0 1ch;\n    height: 100%;\n    color: var(--diffs-fg-number);\n\n    overflow: hidden;\n    justify-content: flex-start;\n  }\n\n  [data-separator='line-info'],\n  [data-separator='line-info-basic'] {\n    [data-separator-content] {\n      height: 100%;\n      user-select: none;\n      overflow: clip;\n    }\n  }\n\n  [data-unmodified-lines] {\n    display: block;\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 0 1 auto;\n  }\n\n  @supports (width: 1cqi) {\n    [data-unified] {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        padding-inline: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n        width: 100cqi;\n\n        [data-separator-content] {\n          border-radius: 6px;\n        }\n      }\n\n      [data-separator='line-info'][data-expand-index]\n        [data-separator-wrapper]\n        [data-separator-content] {\n        border-top-left-radius: unset;\n        border-bottom-left-radius: unset;\n      }\n    }\n\n    [data-gutter] {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        padding-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n      }\n\n      [data-separator='line-info'] [data-separator-content] {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      [data-separator='line-info'][data-expand-index] [data-separator-content] {\n        border-top-left-radius: unset;\n        border-bottom-left-radius: unset;\n      }\n    }\n\n    [data-additions] {\n      [data-content] [data-separator='line-info'] {\n        background-color: var(--diffs-bg);\n\n        [data-separator-wrapper] {\n          display: none;\n        }\n      }\n\n      [data-gutter] [data-separator='line-info'] [data-separator-wrapper] {\n        display: block;\n        height: 100%;\n        background-color: var(--diffs-bg-separator);\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n\n        [data-separator-content],\n        [data-expand-button] {\n          display: none;\n        }\n      }\n    }\n\n    [data-overflow='scroll']\n      [data-additions]\n      [data-gutter]\n      [data-separator='line-info']\n      [data-separator-wrapper] {\n      width: calc(100cqi - var(--diffs-gap-inline, var(--diffs-gap-fallback)));\n    }\n\n    [data-overflow='wrap']\n      [data-additions]\n      [data-content]\n      [data-separator='line-info']\n      [data-separator-wrapper] {\n      background-color: var(--diffs-bg-separator);\n      display: block;\n      height: 100%;\n      margin-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n\n      [data-separator-content],\n      [data-expand-button] {\n        display: none;\n      }\n    }\n\n    [data-separator='line-info'] [data-separator-wrapper] {\n      [data-expand-both],\n      [data-expand-down],\n      [data-expand-up] {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n    }\n\n    @media (pointer: fine) {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        &[data-separator-multi-button] {\n          [data-expand-up] {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: unset;\n          }\n\n          [data-expand-down] {\n            border-bottom-left-radius: 6px;\n            border-top-left-radius: unset;\n          }\n        }\n      }\n    }\n  }\n\n  @media (pointer: coarse) {\n    [data-separator='line-info-basic']\n      [data-separator-wrapper][data-separator-multi-button] {\n      grid-template-columns: 34px 34px auto;\n\n      [data-separator-content] {\n        grid-column: unset;\n        grid-row: unset;\n      }\n    }\n\n    @supports (width: 1cqi) {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        [data-expand-both],\n        [data-expand-down],\n        [data-expand-up] {\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        &[data-separator-multi-button] {\n          [data-expand-up] {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          [data-expand-down] {\n            border-bottom-left-radius: unset;\n            border-top-left-radius: unset;\n          }\n        }\n      }\n    }\n  }\n\n  @media (pointer: fine) {\n    [data-separator-wrapper][data-separator-multi-button] {\n      display: grid;\n      grid-template-rows: 50% 50%;\n\n      [data-separator-content] {\n        grid-column: 2;\n        grid-row: 1 / -1;\n        min-width: min-content;\n      }\n\n      [data-expand-button] {\n        grid-column: 1;\n      }\n    }\n\n    [data-separator='line-info'] [data-separator-wrapper],\n    [data-separator='line-info']\n      [data-separator-wrapper][data-separator-multi-button] {\n      grid-template-columns: 34px auto;\n    }\n\n    [data-separator='line-info-basic'][data-expand-index]\n      [data-separator-wrapper] {\n      grid-template-columns: 100% auto;\n    }\n\n    [data-separator='line-info'],\n    [data-separator='line-info-basic'] {\n      [data-separator-multi-button] {\n        [data-expand-up] {\n          border-bottom: 1px solid var(--diffs-bg);\n          border-right: 2px solid var(--diffs-bg);\n        }\n        [data-expand-down] {\n          border-top: 1px solid var(--diffs-bg);\n          border-right: 2px solid var(--diffs-bg);\n        }\n      }\n    }\n  }\n\n  /* Hunk separator content is duplicated across gutters and content columns,\n   * so custom CSS can do some stuff. Lets hide things for defaults */\n  [data-additions] [data-gutter] [data-separator-wrapper],\n  [data-additions] [data-separator='line-info-basic'] [data-separator-wrapper],\n  [data-content] [data-separator-wrapper] {\n    display: none;\n  }\n\n  [data-line-annotation] {\n    min-height: var(--diffs-annotation-min-height, 0);\n    z-index: 2;\n  }\n\n  [data-merge-conflict-actions] {\n    z-index: 2;\n  }\n\n  [data-separator='custom'] {\n    display: grid;\n    grid-template-columns: subgrid;\n  }\n\n  [data-line],\n  [data-column-number],\n  [data-no-newline] {\n    position: relative;\n    padding-inline: 1ch;\n  }\n\n  [data-indicators='classic'] [data-line] {\n    padding-inline-start: 2ch;\n  }\n\n  [data-indicators='classic'] {\n    [data-line-type='change-addition'],\n    [data-line-type='change-deletion'] {\n      &[data-no-newline],\n      &[data-line] {\n        &::before {\n          display: inline-block;\n          width: 1ch;\n          height: 1lh;\n          position: absolute;\n          top: 0;\n          left: 0;\n          user-select: none;\n        }\n      }\n    }\n\n    [data-line-type='change-addition'] {\n      &[data-line],\n      &[data-no-newline] {\n        &::before {\n          content: '+';\n          color: var(--diffs-addition-base);\n        }\n      }\n    }\n\n    [data-line-type='change-deletion'] {\n      &[data-line],\n      &[data-no-newline] {\n        &::before {\n          content: '-';\n          color: var(--diffs-deletion-base);\n        }\n      }\n    }\n  }\n\n  [data-indicators='bars'] {\n    [data-line-type='change-deletion'],\n    [data-line-type='change-addition'] {\n      &[data-column-number] {\n        &::before {\n          content: '';\n          display: block;\n          width: 4px;\n          height: 100%;\n          position: absolute;\n          top: 0;\n          left: 0;\n          user-select: none;\n          contain: strict;\n        }\n      }\n    }\n\n    [data-line-type='change-deletion'] {\n      &[data-column-number] {\n        &::before {\n          background-image: linear-gradient(\n            0deg,\n            var(--diffs-bg-deletion) 50%,\n            var(--diffs-deletion-base) 50%\n          );\n          background-repeat: repeat;\n          background-size: 2px 2px;\n          background-size: calc(1lh / round(1lh / 2px))\n            calc(1lh / round(1lh / 2px));\n        }\n      }\n    }\n\n    [data-line-type='change-addition'] {\n      &[data-column-number] {\n        &::before {\n          background-color: var(--diffs-addition-base);\n        }\n      }\n    }\n  }\n\n  [data-overflow='wrap'] {\n    [data-line] {\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n\n    /* Annotations wrap in every overflow mode (see the base\n     * [data-annotation-content] rule). In wrap mode, also break long words so\n     * they do not overflow the wrapped column. */\n    [data-annotation-content] {\n      word-break: break-word;\n    }\n  }\n\n  [data-overflow='scroll'] [data-line] {\n    white-space: pre;\n    min-height: 1lh;\n  }\n\n  [data-column-number] {\n    box-sizing: content-box;\n    text-align: right;\n    user-select: none;\n    color: var(--diffs-fg-number);\n    padding-left: 2ch;\n  }\n\n  [data-line-number-content] {\n    display: inline-block;\n    min-width: var(\n      --diffs-min-number-column-width,\n      var(--diffs-min-number-column-width-default, 3ch)\n    );\n    position: relative;\n    z-index: 1;\n  }\n\n  [data-disable-line-numbers] {\n    [data-gutter-buffer],\n    [data-column-number] {\n      min-width: 4px;\n      padding: 0;\n\n      &::before {\n        min-width: 0;\n      }\n    }\n\n    [data-line-number-content] {\n      display: none;\n    }\n\n    [data-gutter-utility-slot] {\n      right: unset;\n      left: 0;\n      justify-content: flex-start;\n    }\n\n    &[data-indicators='bars'] [data-gutter-utility-slot] {\n      /* Using 5px here because theres a 2px separator after the bar */\n      left: 6px;\n    }\n  }\n\n  [data-file][data-disable-line-numbers] {\n    [data-gutter-buffer],\n    [data-column-number] {\n      min-width: 0;\n      border-right: 0;\n    }\n  }\n\n  [data-diff-span] {\n    border-radius: 3px;\n    box-decoration-break: clone;\n  }\n\n  [data-line-type='change-addition'] [data-diff-span] {\n    background-color: var(--diffs-bg-addition-emphasis);\n  }\n\n  [data-line-type='change-deletion'] [data-diff-span] {\n    background-color: var(--diffs-bg-deletion-emphasis);\n  }\n\n  [data-merge-conflict='marker-start'],\n  [data-merge-conflict='marker-base'],\n  [data-merge-conflict='marker-separator'],\n  [data-merge-conflict='marker-end'] {\n    padding-left: 1ch;\n    color: var(--diffs-fg);\n  }\n\n  [data-merge-conflict='marker-start'],\n  [data-merge-conflict='marker-end'] {\n    display: flex;\n    align-items: center;\n\n    &::after {\n      color: var(--diffs-fg-conflict-marker);\n      font-style: normal;\n      font-size: 0.75rem;\n      line-height: 1.25rem;\n      padding-left: 1ch;\n      font-family: var(\n        --diffs-header-font-family,\n        var(--diffs-header-font-fallback)\n      );\n    }\n  }\n\n  [data-merge-conflict='marker-start']::after {\n    content: '(Current Change)';\n  }\n\n  [data-merge-conflict='marker-end']::after {\n    content: '(Incoming Change)';\n  }\n\n  [data-merge-conflict-actions-content] {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding-inline: 0.5rem;\n    min-height: 1.75rem;\n    font-family: var(\n      --diffs-header-font-family,\n      var(--diffs-header-font-fallback)\n    );\n    font-size: 0.75rem;\n    line-height: 1.2;\n    color: var(--diffs-fg);\n  }\n\n  [data-merge-conflict-action] {\n    appearance: none;\n    border: 0;\n    background: transparent;\n    color: var(--diffs-fg-number);\n    font: inherit;\n    font-style: normal;\n    cursor: pointer;\n    padding: 0;\n  }\n\n  [data-merge-conflict-action]:hover {\n    color: var(--diffs-fg);\n  }\n\n  [data-merge-conflict-action='current']:hover {\n    color: var(--diffs-addition-base);\n  }\n\n  [data-merge-conflict-action='incoming']:hover {\n    color: var(--diffs-modified-base);\n  }\n\n  [data-merge-conflict-action-separator] {\n    color: var(--diffs-fg-number);\n    opacity: 0.6;\n    user-select: none;\n  }\n\n  /* Default Header Styles */\n  /* --------------------- */\n  [data-diffs-header='default'] {\n    position: relative;\n    background-color: var(--diffs-bg);\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n    min-height: calc(\n      1lh + (var(--diffs-gap-block, var(--diffs-gap-fallback)) * 3)\n    );\n    padding-inline: 16px;\n    top: 0;\n    z-index: 2;\n  }\n\n  [data-header-content] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  [data-header-content] [data-prev-name],\n  [data-header-content] [data-title] {\n    direction: rtl;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  [data-prev-name] {\n    opacity: 0.7;\n  }\n\n  [data-rename-icon] {\n    fill: currentColor;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  [data-diffs-header='default'] [data-metadata] {\n    display: flex;\n    align-items: center;\n    gap: 1ch;\n    white-space: nowrap;\n  }\n\n  [data-diffs-header='default'] [data-additions-count] {\n    font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n    color: var(--diffs-addition-base);\n  }\n\n  [data-diffs-header='default'] [data-deletions-count] {\n    font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n    color: var(--diffs-deletion-base);\n  }\n\n  [data-change-icon] {\n    fill: currentColor;\n    flex-shrink: 0;\n  }\n\n  [data-change-icon='change'],\n  [data-change-icon='rename-pure'],\n  [data-change-icon='rename-changed'] {\n    color: var(--diffs-modified-base);\n  }\n\n  [data-change-icon='new'] {\n    color: var(--diffs-addition-base);\n  }\n\n  [data-change-icon='deleted'] {\n    color: var(--diffs-deletion-base);\n  }\n\n  [data-change-icon='file'] {\n    opacity: 0.6;\n  }\n\n  [data-annotation-content] {\n    position: relative;\n    display: flow-root;\n    align-self: flex-start;\n    z-index: 2;\n    min-width: 0;\n    isolation: isolate;\n    /* Annotations contain prose, not code. The text must wrap in every\n     * overflow mode. Slotted annotation content inherits this white-space\n     * value. In scroll mode without this rule, the text inherits\n     * `white-space: pre` from the `pre` element. Then long text does not\n     * wrap. */\n    white-space: normal;\n  }\n\n  /* Sticky positioning has a composite costs, so we should _only_ pay it if we\n   * need to */\n  [data-overflow='scroll'] [data-annotation-content] {\n    position: sticky;\n    width: var(--diffs-column-content-width, auto);\n    left: var(--diffs-column-number-width, 0);\n  }\n\n  [data-overflow='scroll'] [data-merge-conflict-actions-content] {\n    position: sticky;\n    width: var(--diffs-column-content-width, auto);\n    left: var(--diffs-column-number-width, 0);\n  }\n\n  /* Undo some of the stuff that the 'pre' tag does */\n  [data-annotation-slot] {\n    text-wrap-mode: wrap;\n    word-break: normal;\n    white-space-collapse: collapse;\n  }\n\n  [data-gutter-utility-slot] {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    display: flex;\n    justify-content: flex-end;\n    touch-action: none;\n  }\n\n  [data-utility-button] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    appearance: none;\n    width: 1lh;\n    height: 1lh;\n    margin-right: calc((1lh - 1ch) * -1);\n    padding: 0;\n    cursor: pointer;\n    font-size: var(--diffs-font-size, 13px);\n    line-height: var(--diffs-line-height, 20px);\n    border-radius: 4px;\n    background-color: var(--diffs-modified-base);\n    color: var(--diffs-bg);\n    fill: currentColor;\n    position: relative;\n    z-index: 4;\n    touch-action: none;\n\n    &::before {\n      content: '';\n      display: block;\n      position: absolute;\n      inset: 0 0 0 -4px;\n    }\n  }\n\n  /* Decoration Bars */\n  /* --------------- */\n  [data-decoration-bar-stack] {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 6px;\n    pointer-events: none;\n    isolation: isolate;\n    z-index: 1;\n    background-color: var(--diffs-decoration-bar-color, transparent);\n    /* overflow: clip visible; */\n    box-sizing: content-box;\n    border-left: 2px solid var(--diffs-bg);\n    border-right: 2px solid var(--diffs-bg);\n\n    [data-decoration-bar-depth='1'] & {\n      background-color: color-mix(\n        in lab,\n        var(--diffs-bg) 20%,\n        var(--diffs-decoration-bar-color, transparent)\n      );\n    }\n\n    [data-decoration-bar-depth='2'] & {\n      background-color: color-mix(\n        in lab,\n        var(--diffs-bg) 45%,\n        var(--diffs-decoration-bar-color, transparent)\n      );\n    }\n\n    [data-decoration-bar-depth='3'] & {\n      background-color: color-mix(\n        in lab,\n        var(--diffs-bg) 65%,\n        var(--diffs-decoration-bar-color, transparent)\n      );\n    }\n\n    [data-decoration-bar-start] & {\n      border-top-left-radius: 5px;\n      border-top-right-radius: 5px;\n\n      /* &::before { */\n      /*   content: ''; */\n      /*   position: absolute; */\n      /*   box-sizing: content-box; */\n      /*   display: block; */\n      /*   width: 6px; */\n      /*   height: 6px; */\n      /*   z-index: 1; */\n      /*   border-top-left-radius: 3px; */\n      /*   border-top-right-radius: 3px; */\n      /*   border-top: 2px solid var(--diffs-bg); */\n      /*   border-left: 2px solid var(--diffs-bg); */\n      /*   border-right: 2px solid var(--diffs-bg); */\n      /*   left: -2px; */\n      /*   top: -2px; */\n      /* } */\n    }\n\n    [data-decoration-bar-end] & {\n      z-index: 3;\n      border-bottom-left-radius: 5px;\n      border-bottom-right-radius: 5px;\n\n      /* &::after { */\n      /*   content: ''; */\n      /*   position: absolute; */\n      /*   box-sizing: content-box; */\n      /*   display: block; */\n      /*   width: 6px; */\n      /*   height: 6px; */\n      /*   border-bottom-left-radius: 3px; */\n      /*   border-bottom-right-radius: 3px; */\n      /*   border-bottom: 2px solid var(--diffs-bg); */\n      /*   border-left: 2px solid var(--diffs-bg); */\n      /*   border-right: 2px solid var(--diffs-bg); */\n      /*   left: -2px; */\n      /*   bottom: -2px; */\n      /* } */\n    }\n\n    /* [data-decoration-bar-end] & { */\n    /*   border-bottom-left-radius: 5px; */\n    /*   border-bottom-right-radius: 5px; */\n    /*   border-bottom: 2px solid var(--diffs-bg); */\n    /*   border-left: 2px solid var(--diffs-bg); */\n    /*   border-right: 2px solid var(--diffs-bg); */\n    /*   right: -2px; */\n    /*   bottom: -2px; */\n    /*   z-index: 3; */\n    /* } */\n  }\n\n  [data-placeholder] {\n    contain: strict;\n  }\n\n  [data-error-wrapper] {\n    overflow: auto;\n    padding: var(--diffs-gap-block, var(--diffs-gap-fallback))\n      var(--diffs-gap-inline, var(--diffs-gap-fallback));\n    max-height: 400px;\n    scrollbar-width: none;\n\n    [data-error-message] {\n      font-weight: bold;\n      font-size: 18px;\n      color: var(--diffs-deletion-base);\n    }\n\n    [data-error-stack] {\n      color: var(--diffs-fg-number);\n    }\n  }\n}\n"],"mappings":";AAAA,IAAA,gBAAe"}
+{"version":3,"file":"style.js","names":[],"sources":["../src/style.css?inline"],"sourcesContent":["@layer base, theme, rendered, unsafe;\n\n@layer base {\n  :host {\n    --diffs-font-fallback:\n      'SF Mono', Monaco, Consolas, 'Ubuntu Mono', 'Liberation Mono',\n      'Courier New', monospace;\n    --diffs-header-font-fallback:\n      system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',\n      'Noto Sans', 'Liberation Sans', Arial, sans-serif;\n\n    --diffs-mixer: light-dark(black, white);\n    --diffs-gap-fallback: 8px;\n    --diffs-scrollbar-gutter-fallback: 6px;\n    --diffs-scrollbar-gutter: var(\n      --diffs-scrollbar-gutter-override,\n      var(\n        --diffs-scrollbar-gutter-measured,\n        var(--diffs-scrollbar-gutter-fallback)\n      )\n    );\n\n    --diffs-added-light: #0dbe4e;\n    --diffs-added-dark: #5ecc71;\n    --diffs-modified-light: #009fff;\n    --diffs-modified-dark: #69b1ff;\n    --diffs-deleted-light: #ff2e3f;\n    --diffs-deleted-dark: #ff6762;\n    --diffs-warning-light: #d5a910;\n    --diffs-warning-dark: #ffd452;\n\n    /*\n    // Available CSS Color Overrides\n    --diffs-bg-buffer-override\n    --diffs-bg-hover-override\n    --diffs-bg-context-override\n    --diffs-bg-context-gutter-override\n    --diffs-bg-separator-override\n    --diffs-bg-caret-override\n\n    --diffs-fg-number-override\n    --diffs-fg-number-addition-override\n    --diffs-fg-number-deletion-override\n    --diffs-fg-conflict-marker-override\n\n    --diffs-deletion-color-override\n    --diffs-addition-color-override\n    --diffs-modified-color-override\n\n    --diffs-bg-deletion-override\n    --diffs-bg-deletion-number-override\n    --diffs-bg-deletion-emphasis-override\n\n    --diffs-bg-addition-override\n    --diffs-bg-addition-number-override\n    --diffs-bg-addition-emphasis-override\n\n    --conflict-bg-current-override\n    --conflict-bg-current-number-override\n    --conflict-bg-current-header-override\n    --conflict-bg-incoming-override\n    --conflict-bg-incoming-number-override\n    --conflict-bg-incoming-header-override\n\n    // Line Selection Color Overrides (for enableLineSelection)\n    --diffs-selection-color-override\n    --diffs-bg-selection-override\n    --diffs-bg-selection-number-override\n\n    // Available CSS Layout Overrides\n    --diffs-gap-inline\n    --diffs-gap-block\n    --diffs-gap-style\n    --diffs-scrollbar-gutter-override\n    --diffs-tab-size\n    --diffs-popover-gap (edit mode: inset for edge-clamped popovers)\n    */\n\n    color-scheme: light dark;\n    display: block;\n    font-family: var(\n      --diffs-header-font-family,\n      var(--diffs-header-font-fallback)\n    );\n    font-size: var(--diffs-font-size, 13px);\n    line-height: var(--diffs-line-height, 20px);\n    font-feature-settings: var(--diffs-font-features);\n\n    /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n     * and vscode use an older build of chrome that appears to have a bug with\n     * color-mix and 'in oklch', so use 'in lab' instead */\n    --diffs-bg: light-dark(\n      var(--diffs-light-bg, #fff),\n      var(--diffs-dark-bg, #000)\n    );\n    --diffs-bg-buffer: var(\n      --diffs-bg-buffer-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)),\n        color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))\n      )\n    );\n    --diffs-bg-context: var(\n      --diffs-bg-context-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 98.5%, var(--diffs-mixer)),\n        color-mix(in lab, var(--diffs-bg) 92.5%, var(--diffs-mixer))\n      )\n    );\n    --diffs-bg-context-gutter: var(\n      --diffs-bg-context-gutter-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg-context) 90%, var(--diffs-bg)),\n        color-mix(in lab, var(--diffs-bg-context) 45%, var(--diffs-bg))\n      )\n    );\n    --diffs-bg-separator: var(\n      --diffs-bg-separator-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)),\n        color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))\n      )\n    );\n\n    --diffs-fg: light-dark(var(--diffs-light, #000), var(--diffs-dark, #fff));\n    --diffs-fg-number: var(\n      --diffs-fg-number-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)),\n        color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))\n      )\n    );\n    --diffs-fg-conflict-marker: var(\n      --diffs-fg-conflict-marker-override,\n      var(--diffs-fg-number)\n    );\n\n    --diffs-deletion-base: var(\n      --diffs-deletion-color-override,\n      light-dark(\n        var(\n          --diffs-light-deletion-color,\n          var(--diffs-deletion-color, var(--diffs-deleted-light))\n        ),\n        var(\n          --diffs-dark-deletion-color,\n          var(--diffs-deletion-color, var(--diffs-deleted-dark))\n        )\n      )\n    );\n    --diffs-addition-base: var(\n      --diffs-addition-color-override,\n      light-dark(\n        var(\n          --diffs-light-addition-color,\n          var(--diffs-addition-color, var(--diffs-added-light))\n        ),\n        var(\n          --diffs-dark-addition-color,\n          var(--diffs-addition-color, var(--diffs-added-dark))\n        )\n      )\n    );\n    --diffs-modified-base: var(\n      --diffs-modified-color-override,\n      light-dark(\n        var(\n          --diffs-light-modified-color,\n          var(--diffs-modified-color, var(--diffs-modified-light))\n        ),\n        var(\n          --diffs-dark-modified-color,\n          var(--diffs-modified-color, var(--diffs-modified-dark))\n        )\n      )\n    );\n\n    /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n   * and vscode use an older build of chrome that appears to have a bug with\n   * color-mix and 'in oklch', so use 'in lab' instead */\n    --diffs-bg-deletion: var(\n      --diffs-bg-deletion-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)),\n        color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base))\n      )\n    );\n    --diffs-bg-deletion-emphasis: var(\n      --diffs-bg-deletion-emphasis-override,\n      light-dark(\n        rgb(from var(--diffs-deletion-base) r g b / 0.15),\n        rgb(from var(--diffs-deletion-base) r g b / 0.2)\n      )\n    );\n\n    --diffs-bg-addition: var(\n      --diffs-bg-addition-override,\n      light-dark(\n        color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)),\n        color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base))\n      )\n    );\n    --diffs-bg-addition-emphasis: var(\n      --diffs-bg-addition-emphasis-override,\n      light-dark(\n        rgb(from var(--diffs-addition-base) r g b / 0.15),\n        rgb(from var(--diffs-addition-base) r g b / 0.2)\n      )\n    );\n\n    --diffs-selection-base: var(--diffs-modified-base);\n    --diffs-selection-number-fg: light-dark(\n      color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)),\n      color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer))\n    );\n    background-color: var(--diffs-bg);\n    color: var(--diffs-fg);\n  }\n\n  /* NOTE(mdo): Some semantic HTML elements (e.g. `pre`, `code`) have default\n * user-agent styles. These must be overridden to use our custom styles. */\n  pre,\n  code,\n  [data-error-wrapper] {\n    isolation: isolate;\n    margin: 0;\n    padding: 0;\n    display: block;\n    outline: none;\n    font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n  }\n\n  pre,\n  code {\n    background-color: var(--diffs-bg);\n  }\n\n  code {\n    contain: content;\n  }\n\n  input,\n  button {\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  [data-icon-sprite] {\n    display: none;\n  }\n\n  /* NOTE(mdo): Headers and separators are within pre/code, so we need to reset\n   * their font-family explicitly. */\n  [data-diffs-header],\n  [data-separator] {\n    font-family: var(\n      --diffs-header-font-family,\n      var(--diffs-header-font-fallback)\n    );\n  }\n\n  [data-diffs-header][data-sticky] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: var(--diffs-bg);\n  }\n\n  [data-file-info] {\n    padding: 10px;\n    font-weight: 700;\n    color: var(--fg);\n    /* NOTE(amadeus): we cannot use 'in oklch' because current versions of cursor\n   * and vscode use an older build of chrome that appears to have a bug with\n   * color-mix and 'in oklch', so use 'in lab' instead */\n    background-color: color-mix(in lab, var(--bg) 98%, var(--fg));\n    border-block: 1px solid color-mix(in lab, var(--bg) 95%, var(--fg));\n  }\n\n  [data-diff],\n  [data-file] {\n    /* This feels a bit crazy to me... so I need to think about it a bit more... */\n    --diffs-grid-number-column-width: minmax(min-content, max-content);\n    --diffs-code-grid: var(--diffs-grid-number-column-width) 1fr;\n\n    &[data-dehydrated] {\n      --diffs-code-grid: var(--diffs-grid-number-column-width) minmax(0, 1fr);\n    }\n\n    &:hover [data-code]::-webkit-scrollbar-thumb {\n      background-color: var(--diffs-bg-context);\n    }\n  }\n\n  /* iOS WebKit uses overlay scrollbars, so unmeasured layout compensation\n   * should start at zero rather than the desktop custom-scrollbar fallback. */\n  @supports (-webkit-touch-callout: none) {\n    :host {\n      --diffs-scrollbar-gutter-fallback: 0px;\n    }\n  }\n\n  [data-line] span,\n  [data-edit-prediction-suffix] span {\n    color: light-dark(\n      var(--diffs-token-light, var(--diffs-light)),\n      var(--diffs-token-dark, var(--diffs-dark))\n    );\n    background-color: light-dark(\n      var(--diffs-token-light-bg, inherit),\n      var(--diffs-token-dark-bg, inherit)\n    );\n  }\n\n  /* Line Color and BG Calculations */\n  [data-line],\n  [data-gutter-buffer],\n  [data-column-number],\n  [data-line-annotation],\n  [data-no-newline],\n  [data-merge-conflict],\n  [data-merge-conflict-actions],\n  [data-editor-overlay] {\n    /* Pre-fill css variables for appropriate up-mixing */\n    --diffs-computed-decoration-bg: var(--diffs-bg);\n    --diffs-computed-diff-line-bg: var(--diffs-computed-decoration-bg);\n    --diffs-computed-selected-line-bg: var(--diffs-computed-diff-line-bg);\n    --diffs-computed-editor-active-line-bg: var(\n      --diffs-computed-selected-line-bg\n    );\n    --diffs-computed-hovered-line-bg: var(\n      --diffs-computed-editor-active-line-bg\n    );\n\n    --diffs-hover-mix-target: var(\n      --diffs-bg-hover-override,\n      var(--diffs-mixer)\n    );\n    --diffs-line-bg: var(--diffs-computed-hovered-line-bg);\n\n    color: var(--diffs-fg);\n    background-color: var(--diffs-line-bg, var(--diffs-bg));\n  }\n\n  [data-line],\n  [data-no-newline] {\n    &[data-decoration-bg] {\n      --mix-deco-light: 92%;\n      --mix-deco-dark: 85%;\n\n      &[data-decoration-bg-depth='2'] {\n        --mix-deco-light: 88%;\n        --mix-deco-dark: 80%;\n      }\n\n      &[data-decoration-bg-depth='3'] {\n        --mix-deco-light: 85%;\n        --mix-deco-dark: 78%;\n      }\n\n      --diffs-hover-mix-target: var(--diffs-decoration-bg);\n\n      --diffs-computed-decoration-bg: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-bg) var(--mix-deco-light),\n          var(--diffs-decoration-bg)\n        ),\n        color-mix(\n          in lab,\n          var(--diffs-bg) var(--mix-deco-dark),\n          var(--diffs-decoration-bg)\n        )\n      );\n    }\n  }\n\n  [data-line-annotation],\n  [data-gutter-buffer='annotation'] {\n    --diffs-annotation-bg: var(--diffs-bg-context);\n    --diffs-computed-decoration-bg: var(--diffs-annotation-bg);\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-merge-conflict-actions],\n  [data-gutter-buffer='merge-conflict-action'],\n  [data-gutter-buffer='merge-conflict-marker-base'],\n  [data-gutter-buffer='merge-conflict-marker-separator'],\n  [data-merge-conflict='marker-base'],\n  [data-merge-conflict='marker-separator'] {\n    --diffs-computed-decoration-bg: var(--diffs-bg-context);\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-gutter-buffer='merge-conflict-marker-start'],\n  [data-merge-conflict='marker-start'] {\n    --diffs-computed-decoration-bg: light-dark(\n      color-mix(\n        in lab,\n        var(--diffs-bg) 78%,\n        var(--conflict-bg-current-header-override, var(--diffs-addition-base))\n      ),\n      color-mix(\n        in lab,\n        var(--diffs-bg) 68%,\n        var(--conflict-bg-current-header-override, var(--diffs-addition-base))\n      )\n    );\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-gutter-buffer='merge-conflict-marker-end'],\n  [data-merge-conflict='marker-end'] {\n    --diffs-computed-decoration-bg: light-dark(\n      color-mix(\n        in lab,\n        var(--diffs-bg) 78%,\n        var(--conflict-bg-incoming-header-override, var(--diffs-modified-base))\n      ),\n      color-mix(\n        in lab,\n        var(--diffs-bg) 68%,\n        var(--conflict-bg-incoming-header-override, var(--diffs-modified-base))\n      )\n    );\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  [data-has-merge-conflict] [data-line-annotation],\n  [data-has-merge-conflict] [data-gutter-buffer='annotation'] {\n    --diffs-computed-decoration-bg: var(--diffs-bg);\n    --diffs-hover-mix-target: var(--diffs-computed-editor-active-line-bg);\n  }\n\n  /* We are using where here to not affect the nesting impacts later on for\n   * hover and selection */\n  :where([data-background]) {\n    [data-gutter-buffer],\n    [data-column-number] {\n      --mix-light: 91%;\n      --mix-dark: 85%;\n    }\n\n    [data-line],\n    [data-no-newline] {\n      --mix-light: 88%;\n      --mix-dark: 80%;\n    }\n\n    [data-gutter-buffer],\n    [data-column-number],\n    [data-line],\n    [data-no-newline] {\n      --diffs-diff-line-mix-target: var(--diffs-bg);\n\n      &[data-line-type='change-deletion'] {\n        --diffs-diff-line-mix-target: var(\n          --diffs-bg-deletion-override,\n          var(--diffs-deletion-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(\n            --diffs-fg-number-deletion-override,\n            var(--diffs-deletion-base)\n          );\n\n          --diffs-diff-line-mix-target: var(\n            --diffs-bg-deletion-number-override,\n            var(--diffs-deletion-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n\n      &[data-line-type='change-addition'] {\n        --diffs-diff-line-mix-target: var(\n          --diffs-bg-addition-override,\n          var(--diffs-addition-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(\n            --diffs-fg-number-addition-override,\n            var(--diffs-addition-base)\n          );\n\n          --diffs-diff-line-mix-target: var(\n            --diffs-bg-addition-number-override,\n            var(--diffs-addition-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n\n      &[data-merge-conflict='current'] {\n        --diffs-diff-line-mix-target: var(\n          --conflict-bg-current-override,\n          var(--diffs-addition-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(\n            --diffs-fg-number-addition-override,\n            var(--diffs-addition-base)\n          );\n\n          --diffs-diff-line-mix-target: var(\n            --conflict-bg-current-number-override,\n            var(--diffs-addition-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n\n      &[data-merge-conflict='incoming'] {\n        --diffs-diff-line-mix-target: var(\n          --conflict-bg-incoming-override,\n          var(--diffs-modified-base)\n        );\n        --diffs-hover-mix-target: var(--diffs-diff-line-mix-target);\n\n        &:where([data-gutter-buffer], [data-column-number]) {\n          color: var(--diffs-modified-base);\n\n          --diffs-diff-line-mix-target: var(\n            --conflict-bg-incoming-number-override,\n            var(--diffs-modified-base)\n          );\n        }\n\n        --diffs-computed-diff-line-bg: light-dark(\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-light),\n            var(--diffs-diff-line-mix-target)\n          ),\n          color-mix(\n            in lab,\n            var(--diffs-computed-decoration-bg) var(--mix-dark),\n            var(--diffs-diff-line-mix-target)\n          )\n        );\n      }\n    }\n  }\n\n  /* Order is important for rationalizing these selectors and for order of\n   * application, therefore we need to disable this style-lint rule */\n  /* stylelint-disable-next-line no-duplicate-selectors */\n  [data-gutter-buffer],\n  [data-column-number],\n  [data-line],\n  [data-line-annotation],\n  [data-merge-conflict],\n  [data-merge-conflict-actions],\n  [data-no-newline],\n  [data-editor-overlay] {\n    --diffs-selection-mix-target: var(\n      --diffs-bg-selection-override,\n      var(--diffs-selection-base)\n    );\n    --diffs-selection-emphasis-mix-target: var(--diffs-selection-mix-target);\n\n    &:where([data-editor-overlay]),\n    &:where(\n        [data-line],\n        [data-line-annotation],\n        [data-merge-conflict],\n        [data-merge-conflict-actions],\n        [data-no-newline]\n      )[data-selected-line] {\n      --mix-selection-light: 82%;\n      --mix-selection-dark: 75%;\n      --diffs-hover-mix-target: var(--diffs-selection-mix-target);\n    }\n\n    &:where(\n      [data-gutter-buffer][data-selected-line],\n      [data-column-number]:is([data-selected-line], [data-editor-active-line])\n    ) {\n      --mix-selection-light: 75%;\n      --mix-selection-dark: 60%;\n      --diffs-selection-mix-target: var(\n        --diffs-bg-selection-number-override,\n        var(--diffs-selection-base)\n      );\n      --diffs-hover-mix-target: var(--diffs-selection-mix-target);\n    }\n\n    /* Keep the light-theme emphasis on a selected changed line tied to its\n     * resolved diff and selection colors. */\n    &:where([data-line][data-selected-line]):is(\n        [data-line-type='change-addition'],\n        [data-line-type='change-deletion']\n      ) {\n      --diffs-selection-emphasis-mix-target: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-diff-line-mix-target, var(--diffs-selection-mix-target))\n            var(--mix-selection-light),\n          var(--diffs-selection-mix-target)\n        ),\n        var(--diffs-selection-mix-target)\n      );\n    }\n\n    &:where([data-editor-overlay]),\n    &[data-selected-line] {\n      --diffs-computed-selected-line-bg: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-computed-diff-line-bg) var(--mix-selection-light),\n          var(--diffs-selection-mix-target)\n        ),\n        color-mix(\n          in lab,\n          var(--diffs-computed-diff-line-bg) var(--mix-selection-dark),\n          var(--diffs-selection-mix-target)\n        )\n      );\n    }\n  }\n\n  /* The editor's active line sits above selection, but hover remains the final\n   * line-background treatment. */\n  [data-line][data-editor-active-line],\n  [data-column-number][data-editor-active-line] {\n    --diffs-computed-editor-active-line-bg: color-mix(\n      in lab,\n      var(--diffs-computed-selected-line-bg)\n        var(--diffs-editor-active-line-source-mix, 100%),\n      var(--diffs-selection-emphasis-mix-target)\n    );\n  }\n\n  @media (pointer: fine) {\n    [data-line][data-hovered],\n    [data-gutter-buffer][data-hovered],\n    [data-column-number][data-hovered],\n    [data-line-annotation][data-hovered],\n    [data-no-newline][data-hovered],\n    [data-merge-conflict][data-hovered],\n    [data-merge-conflict-actions][data-hovered],\n    [data-editor-overlay][data-hovered] {\n      --diffs-computed-hovered-line-bg: light-dark(\n        color-mix(\n          in lab,\n          var(--diffs-computed-editor-active-line-bg) 97%,\n          var(--diffs-hover-mix-target)\n        ),\n        color-mix(\n          in lab,\n          var(--diffs-computed-editor-active-line-bg) 91%,\n          var(--diffs-hover-mix-target)\n        )\n      );\n    }\n  }\n\n  [data-gutter-buffer][data-selected-line],\n  [data-column-number]:is([data-selected-line], [data-editor-active-line]) {\n    color: var(--diffs-selection-number-fg);\n  }\n\n  [data-no-newline] {\n    user-select: none;\n\n    span {\n      opacity: 0.6;\n    }\n  }\n\n  [data-diff-type='split'][data-overflow='scroll'] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n\n    [data-additions] {\n      border-left: 1px solid var(--diffs-bg);\n    }\n\n    [data-deletions] {\n      border-right: 1px solid var(--diffs-bg);\n    }\n  }\n\n  [data-code] {\n    display: grid;\n    grid-auto-flow: dense;\n    grid-template-columns: var(--diffs-code-grid);\n    overflow: var(--diffs-overflow-override, scroll) clip;\n    overscroll-behavior-x: none;\n    tab-size: var(--diffs-tab-size, 2);\n    align-self: flex-start;\n    padding-top: var(--diffs-gap-block, var(--diffs-gap-fallback));\n    padding-bottom: max(\n      0px,\n      calc(\n        var(--diffs-gap-block, var(--diffs-gap-fallback)) -\n          var(--diffs-scrollbar-gutter)\n      )\n    );\n    scrollbar-gutter: stable;\n  }\n\n  [data-diffs-scrollbar-measure] {\n    position: absolute;\n    top: -200px;\n    left: -200px;\n    opacity: 0;\n    pointer-events: none;\n    width: 100px;\n    height: 100px;\n    padding: 0;\n    grid-template-columns: none;\n    scrollbar-gutter: auto;\n  }\n\n  [data-container-size] {\n    container-type: inline-size;\n  }\n\n  [data-code]::-webkit-scrollbar {\n    width: 0;\n    height: var(--diffs-scrollbar-gutter);\n  }\n\n  [data-code]::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  [data-code]::-webkit-scrollbar-thumb {\n    background-color: transparent;\n    border: 1px solid transparent;\n    background-clip: content-box;\n    border-radius: 3px;\n  }\n\n  [data-code]::-webkit-scrollbar-corner {\n    background-color: transparent;\n  }\n\n  /*\n   * If we apply these rules globally it will mean that webkit will opt into the\n   * standards compliant version of custom css scrollbars, which we do not want\n   * because the custom stuff will look better\n  */\n  @supports (-moz-appearance: none) {\n    [data-code] {\n      scrollbar-width: thin;\n      scrollbar-color: var(--diffs-bg-context) transparent;\n      padding-bottom: var(--diffs-gap-block, var(--diffs-gap-fallback));\n    }\n  }\n\n  [data-diffs-header] ~ [data-diff],\n  [data-diffs-header] ~ [data-file] {\n    [data-code],\n    &[data-overflow='wrap'],\n    &[data-dehydrated][data-diff-type='split'][data-overflow='scroll'] {\n      padding-top: 0;\n    }\n  }\n\n  [data-gutter] {\n    display: grid;\n    grid-template-rows: subgrid;\n    grid-template-columns: subgrid;\n    grid-column: 1;\n    z-index: 3;\n    position: relative;\n    background-color: var(--diffs-bg);\n\n    [data-gutter-buffer],\n    [data-column-number] {\n      border-right: var(--diffs-gap-style, 2px solid var(--diffs-bg));\n    }\n  }\n\n  [data-content] {\n    display: grid;\n    grid-template-rows: subgrid;\n    grid-template-columns: subgrid;\n    grid-column: 2;\n    min-width: 0;\n    background-color: var(--diffs-bg);\n  }\n\n  /* Keep per-row selectors outside this guard: :has would rescan the columns\n   * for every row. */\n  [data-overflow='scroll']:not(\n      [data-dehydrated],\n      [data-custom-styles],\n      :has(\n        > [data-code] > [contenteditable],\n        > [data-code]\n          > *\n          > :is(\n            [data-line-annotation],\n            [data-separator],\n            [data-merge-conflict],\n            [data-merge-conflict-actions]\n          )\n      )\n    )\n    > [data-code] {\n    display: flex;\n\n    > [data-gutter] {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    > [data-content] {\n      display: block;\n      flex: 1 0 max-content;\n    }\n  }\n\n  /* Both split layouts that share one grid across the two columns: wrap\n   * always, and scroll while dehydrated. Scroll mode normally renders each\n   * column as its own scroll container, where paired annotation rows only get\n   * equal heights once the resize manager measures them — before hydration\n   * that measurement hasn't run, so the side hosting the annotation content\n   * would be taller and the rows below it would shift on hydration. The\n   * shared grid gives paired rows equal heights in pure CSS; the dehydrated\n   * scroll variant keeps nowrap text and clips horizontal overflow until\n   * hydration swaps in the real scroll containers. */\n  [data-diff-type='split'][data-overflow='wrap'],\n  [data-dehydrated][data-diff-type='split'][data-overflow='scroll'] {\n    display: grid;\n    grid-auto-flow: dense;\n    grid-template-columns: repeat(2, var(--diffs-code-grid));\n    padding-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n\n    [data-code] {\n      display: contents;\n    }\n\n    [data-deletions] {\n      [data-gutter] {\n        grid-column: 1;\n      }\n\n      [data-content] {\n        grid-column: 2;\n        border-right: 1px solid var(--diffs-bg);\n      }\n    }\n\n    [data-additions] {\n      [data-gutter] {\n        grid-column: 3;\n        border-left: 1px solid var(--diffs-bg);\n      }\n\n      [data-content] {\n        grid-column: 4;\n      }\n    }\n  }\n\n  [data-dehydrated][data-diff-type='split'][data-overflow='scroll']\n    [data-content] {\n    overflow: clip;\n  }\n\n  [data-overflow='scroll'] [data-gutter] {\n    position: sticky;\n    left: 0;\n  }\n\n  [data-interactive-lines] [data-line] {\n    cursor: pointer;\n  }\n\n  [data-interactive-line-numbers] [data-column-number] {\n    cursor: pointer;\n    touch-action: none;\n  }\n\n  [data-content-buffer],\n  [data-gutter-buffer] {\n    position: relative;\n    user-select: none;\n    min-height: 1lh;\n  }\n\n  [data-gutter-buffer] {\n    padding-left: 2ch;\n    padding-right: 1ch;\n\n    &::before {\n      content: '';\n      display: block;\n      min-width: var(\n        --diffs-min-number-column-width,\n        var(--diffs-min-number-column-width-default, 3ch)\n      );\n    }\n  }\n\n  [data-gutter-buffer='annotation'] {\n    --diffs-annotation-bg: var(--diffs-bg-context-gutter);\n    min-height: 0;\n  }\n\n  [data-gutter-buffer='buffer'] {\n    --diffs-line-bg: var(--diffs-bg-context-gutter);\n  }\n\n  [data-content-buffer] {\n    grid-column: 1;\n    /* We multiply by 1.414 (√2) to better approximate the diagonal repeat distance */\n    background-size: 8px 8px;\n    background-position: 5px 0;\n    background-origin: border-box;\n    /* This is incredibley expensive... */\n    background-image: repeating-linear-gradient(\n      -45deg,\n      transparent,\n      transparent calc(3px * 1.414),\n      var(--diffs-bg-buffer) calc(3px * 1.414),\n      var(--diffs-bg-buffer) calc(4px * 1.414)\n    );\n  }\n\n  /* Hunk Separators */\n  /* --------------- */\n  [data-separator] {\n    box-sizing: content-box;\n    background-color: var(--diffs-bg);\n  }\n\n  [data-separator='simple'] {\n    min-height: 4px;\n  }\n\n  [data-separator='line-info'],\n  [data-separator='line-info-basic'],\n  [data-separator='metadata'],\n  [data-separator='simple'] {\n    background-color: var(--diffs-bg-separator);\n  }\n\n  [data-separator='line-info'],\n  [data-separator='line-info-basic'],\n  [data-separator='metadata'] {\n    height: 32px;\n    position: relative;\n  }\n\n  [data-separator-wrapper] {\n    user-select: none;\n    fill: currentColor;\n    position: absolute;\n    inset-inline: 0;\n    display: flex;\n    align-items: center;\n    background-color: var(--diffs-bg);\n    height: 100%;\n  }\n\n  [data-content] [data-separator-wrapper] {\n    display: none;\n  }\n\n  [data-separator='metadata'] [data-separator-wrapper] {\n    inset-inline: 100% auto;\n    padding-inline: 1ch;\n    height: 100%;\n    background-color: var(--diffs-bg-separator);\n    color: var(--diffs-fg-number);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: min-content;\n  }\n\n  [data-separator='line-info'] {\n    margin-block: var(--diffs-gap-block, var(--diffs-gap-fallback));\n\n    [data-separator-wrapper] {\n      min-width: 16px;\n    }\n  }\n\n  [data-separator='line-info-basic'],\n  [data-separator='metadata'] {\n    margin-block: 0;\n  }\n\n  [data-separator='line-info'][data-separator-first] {\n    margin-top: 0;\n  }\n\n  [data-separator='line-info'][data-separator-last] {\n    margin-bottom: 0;\n  }\n\n  [data-expand-index] [data-separator-wrapper] {\n    display: grid;\n    grid-template-columns: 32px auto;\n  }\n\n  [data-expand-index] [data-separator-wrapper][data-separator-multi-button] {\n    grid-template-columns: 32px 32px auto;\n  }\n\n  [data-expand-button],\n  [data-separator-content] {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    background-color: var(--diffs-bg-separator);\n  }\n\n  [data-expand-index] [data-separator-content]:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  [data-expand-button] {\n    justify-content: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    min-width: 32px;\n    align-self: stretch;\n    color: var(--diffs-fg-number);\n    border-right: 2px solid var(--diffs-bg);\n\n    &:hover {\n      color: var(--diffs-fg);\n    }\n\n    &[data-expand-all-button] {\n      display: none;\n    }\n  }\n\n  [data-expand-down] [data-icon] {\n    transform: scaleY(-1);\n  }\n\n  [data-separator-content] {\n    flex: 1 1 auto;\n    padding: 0 1ch;\n    height: 100%;\n    color: var(--diffs-fg-number);\n\n    overflow: hidden;\n    justify-content: flex-start;\n  }\n\n  [data-separator='line-info'],\n  [data-separator='line-info-basic'] {\n    [data-separator-content] {\n      height: 100%;\n      user-select: none;\n      overflow: clip;\n    }\n  }\n\n  [data-unmodified-lines] {\n    display: block;\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 0 1 auto;\n  }\n\n  @supports (width: 1cqi) {\n    [data-unified] {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        padding-inline: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n        width: 100cqi;\n\n        [data-separator-content] {\n          border-radius: 6px;\n        }\n      }\n\n      [data-separator='line-info'][data-expand-index]\n        [data-separator-wrapper]\n        [data-separator-content] {\n        border-top-left-radius: unset;\n        border-bottom-left-radius: unset;\n      }\n    }\n\n    [data-gutter] {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        padding-left: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n      }\n\n      [data-separator='line-info'] [data-separator-content] {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      [data-separator='line-info'][data-expand-index] [data-separator-content] {\n        border-top-left-radius: unset;\n        border-bottom-left-radius: unset;\n      }\n    }\n\n    [data-additions] {\n      [data-content] [data-separator='line-info'] {\n        background-color: var(--diffs-bg);\n\n        [data-separator-wrapper] {\n          display: none;\n        }\n      }\n\n      [data-gutter] [data-separator='line-info'] [data-separator-wrapper] {\n        display: block;\n        height: 100%;\n        background-color: var(--diffs-bg-separator);\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n\n        [data-separator-content],\n        [data-expand-button] {\n          display: none;\n        }\n      }\n    }\n\n    [data-overflow='scroll']\n      [data-additions]\n      [data-gutter]\n      [data-separator='line-info']\n      [data-separator-wrapper] {\n      width: calc(100cqi - var(--diffs-gap-inline, var(--diffs-gap-fallback)));\n    }\n\n    [data-overflow='wrap']\n      [data-additions]\n      [data-content]\n      [data-separator='line-info']\n      [data-separator-wrapper] {\n      background-color: var(--diffs-bg-separator);\n      display: block;\n      height: 100%;\n      margin-right: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n\n      [data-separator-content],\n      [data-expand-button] {\n        display: none;\n      }\n    }\n\n    [data-separator='line-info'] [data-separator-wrapper] {\n      [data-expand-both],\n      [data-expand-down],\n      [data-expand-up] {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n    }\n\n    @media (pointer: fine) {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        &[data-separator-multi-button] {\n          [data-expand-up] {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: unset;\n          }\n\n          [data-expand-down] {\n            border-bottom-left-radius: 6px;\n            border-top-left-radius: unset;\n          }\n        }\n      }\n    }\n  }\n\n  @media (pointer: coarse) {\n    [data-separator='line-info-basic']\n      [data-separator-wrapper][data-separator-multi-button] {\n      grid-template-columns: 34px 34px auto;\n\n      [data-separator-content] {\n        grid-column: unset;\n        grid-row: unset;\n      }\n    }\n\n    @supports (width: 1cqi) {\n      [data-separator='line-info'] [data-separator-wrapper] {\n        [data-expand-both],\n        [data-expand-down],\n        [data-expand-up] {\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        &[data-separator-multi-button] {\n          [data-expand-up] {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          [data-expand-down] {\n            border-bottom-left-radius: unset;\n            border-top-left-radius: unset;\n          }\n        }\n      }\n    }\n  }\n\n  @media (pointer: fine) {\n    [data-separator-wrapper][data-separator-multi-button] {\n      display: grid;\n      grid-template-rows: 50% 50%;\n\n      [data-separator-content] {\n        grid-column: 2;\n        grid-row: 1 / -1;\n        min-width: min-content;\n      }\n\n      [data-expand-button] {\n        grid-column: 1;\n      }\n    }\n\n    [data-separator='line-info'] [data-separator-wrapper],\n    [data-separator='line-info']\n      [data-separator-wrapper][data-separator-multi-button] {\n      grid-template-columns: 34px auto;\n    }\n\n    [data-separator='line-info-basic'][data-expand-index]\n      [data-separator-wrapper] {\n      grid-template-columns: 100% auto;\n    }\n\n    [data-separator='line-info'],\n    [data-separator='line-info-basic'] {\n      [data-separator-multi-button] {\n        [data-expand-up] {\n          border-bottom: 1px solid var(--diffs-bg);\n          border-right: 2px solid var(--diffs-bg);\n        }\n        [data-expand-down] {\n          border-top: 1px solid var(--diffs-bg);\n          border-right: 2px solid var(--diffs-bg);\n        }\n      }\n    }\n  }\n\n  /* Hunk separator content is duplicated across gutters and content columns,\n   * so custom CSS can do some stuff. Lets hide things for defaults */\n  [data-additions] [data-gutter] [data-separator-wrapper],\n  [data-additions] [data-separator='line-info-basic'] [data-separator-wrapper],\n  [data-content] [data-separator-wrapper] {\n    display: none;\n  }\n\n  [data-line-annotation] {\n    min-height: var(--diffs-annotation-min-height, 0);\n    z-index: 2;\n  }\n\n  [data-merge-conflict-actions] {\n    z-index: 2;\n  }\n\n  [data-separator='custom'] {\n    display: grid;\n    grid-template-columns: subgrid;\n  }\n\n  [data-line],\n  [data-column-number],\n  [data-no-newline] {\n    position: relative;\n    padding-inline: 1ch;\n  }\n\n  [data-indicators='classic'] [data-line] {\n    padding-inline-start: 2ch;\n  }\n\n  [data-indicators='classic'] {\n    [data-line-type='change-addition'],\n    [data-line-type='change-deletion'] {\n      &[data-no-newline],\n      &[data-line] {\n        &::before {\n          display: inline-block;\n          width: 1ch;\n          height: 1lh;\n          position: absolute;\n          top: 0;\n          left: 0;\n          user-select: none;\n        }\n      }\n    }\n\n    [data-line-type='change-addition'] {\n      &[data-line],\n      &[data-no-newline] {\n        &::before {\n          content: '+';\n          color: var(--diffs-addition-base);\n        }\n      }\n    }\n\n    [data-line-type='change-deletion'] {\n      &[data-line],\n      &[data-no-newline] {\n        &::before {\n          content: '-';\n          color: var(--diffs-deletion-base);\n        }\n      }\n    }\n  }\n\n  [data-indicators='bars'] {\n    [data-line-type='change-deletion'],\n    [data-line-type='change-addition'] {\n      &[data-column-number] {\n        &::before {\n          content: '';\n          display: block;\n          width: 4px;\n          height: 100%;\n          position: absolute;\n          top: 0;\n          left: 0;\n          user-select: none;\n          contain: strict;\n        }\n      }\n    }\n\n    [data-line-type='change-deletion'] {\n      &[data-column-number] {\n        &::before {\n          background-image: linear-gradient(\n            0deg,\n            var(--diffs-bg-deletion) 50%,\n            var(--diffs-deletion-base) 50%\n          );\n          background-repeat: repeat;\n          background-size: 2px 2px;\n          background-size: calc(1lh / round(1lh / 2px))\n            calc(1lh / round(1lh / 2px));\n        }\n      }\n    }\n\n    [data-line-type='change-addition'] {\n      &[data-column-number] {\n        &::before {\n          background-color: var(--diffs-addition-base);\n        }\n      }\n    }\n  }\n\n  [data-overflow='wrap'] {\n    [data-line] {\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n\n    /* Annotations wrap in every overflow mode (see the base\n     * [data-annotation-content] rule). In wrap mode, also break long words so\n     * they do not overflow the wrapped column. */\n    [data-annotation-content] {\n      word-break: break-word;\n    }\n  }\n\n  [data-overflow='scroll'] [data-line] {\n    white-space: pre;\n    min-height: 1lh;\n  }\n\n  [data-overflow='scroll'] [data-column-number] {\n    min-height: 1lh;\n  }\n\n  [data-column-number] {\n    box-sizing: content-box;\n    text-align: right;\n    user-select: none;\n    color: var(--diffs-fg-number);\n    padding-left: 2ch;\n  }\n\n  [data-line-number-content] {\n    display: inline-block;\n    min-width: var(\n      --diffs-min-number-column-width,\n      var(--diffs-min-number-column-width-default, 3ch)\n    );\n    position: relative;\n    z-index: 1;\n  }\n\n  [data-disable-line-numbers] {\n    [data-gutter-buffer],\n    [data-column-number] {\n      min-width: 4px;\n      padding: 0;\n\n      &::before {\n        min-width: 0;\n      }\n    }\n\n    [data-line-number-content] {\n      display: none;\n    }\n\n    [data-gutter-utility-slot] {\n      right: unset;\n      left: 0;\n      justify-content: flex-start;\n    }\n\n    &[data-indicators='bars'] [data-gutter-utility-slot] {\n      /* Using 5px here because theres a 2px separator after the bar */\n      left: 6px;\n    }\n  }\n\n  [data-file][data-disable-line-numbers] {\n    [data-gutter-buffer],\n    [data-column-number] {\n      min-width: 0;\n      border-right: 0;\n    }\n  }\n\n  [data-diff-span] {\n    border-radius: 3px;\n    box-decoration-break: clone;\n  }\n\n  [data-line-type='change-addition'] [data-diff-span] {\n    background-color: var(--diffs-bg-addition-emphasis);\n  }\n\n  [data-line-type='change-deletion'] [data-diff-span] {\n    background-color: var(--diffs-bg-deletion-emphasis);\n  }\n\n  [data-merge-conflict='marker-start'],\n  [data-merge-conflict='marker-base'],\n  [data-merge-conflict='marker-separator'],\n  [data-merge-conflict='marker-end'] {\n    padding-left: 1ch;\n    color: var(--diffs-fg);\n  }\n\n  [data-merge-conflict='marker-start'],\n  [data-merge-conflict='marker-end'] {\n    display: flex;\n    align-items: center;\n\n    &::after {\n      color: var(--diffs-fg-conflict-marker);\n      font-style: normal;\n      font-size: 0.75rem;\n      line-height: 1.25rem;\n      padding-left: 1ch;\n      font-family: var(\n        --diffs-header-font-family,\n        var(--diffs-header-font-fallback)\n      );\n    }\n  }\n\n  [data-merge-conflict='marker-start']::after {\n    content: '(Current Change)';\n  }\n\n  [data-merge-conflict='marker-end']::after {\n    content: '(Incoming Change)';\n  }\n\n  [data-merge-conflict-actions-content] {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding-inline: 0.5rem;\n    min-height: 1.75rem;\n    font-family: var(\n      --diffs-header-font-family,\n      var(--diffs-header-font-fallback)\n    );\n    font-size: 0.75rem;\n    line-height: 1.2;\n    color: var(--diffs-fg);\n  }\n\n  [data-merge-conflict-action] {\n    appearance: none;\n    border: 0;\n    background: transparent;\n    color: var(--diffs-fg-number);\n    font: inherit;\n    font-style: normal;\n    cursor: pointer;\n    padding: 0;\n  }\n\n  [data-merge-conflict-action]:hover {\n    color: var(--diffs-fg);\n  }\n\n  [data-merge-conflict-action='current']:hover {\n    color: var(--diffs-addition-base);\n  }\n\n  [data-merge-conflict-action='incoming']:hover {\n    color: var(--diffs-modified-base);\n  }\n\n  [data-merge-conflict-action-separator] {\n    color: var(--diffs-fg-number);\n    opacity: 0.6;\n    user-select: none;\n  }\n\n  /* Default Header Styles */\n  /* --------------------- */\n  [data-diffs-header='default'] {\n    position: relative;\n    background-color: var(--diffs-bg);\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n    min-height: calc(\n      1lh + (var(--diffs-gap-block, var(--diffs-gap-fallback)) * 3)\n    );\n    padding-inline: 16px;\n    top: 0;\n    z-index: 2;\n  }\n\n  [data-header-content] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--diffs-gap-inline, var(--diffs-gap-fallback));\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  [data-header-content] [data-prev-name],\n  [data-header-content] [data-title] {\n    direction: rtl;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  [data-prev-name] {\n    opacity: 0.7;\n  }\n\n  [data-rename-icon] {\n    fill: currentColor;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  [data-diffs-header='default'] [data-metadata] {\n    display: flex;\n    align-items: center;\n    gap: 1ch;\n    white-space: nowrap;\n  }\n\n  [data-diffs-header='default'] [data-additions-count] {\n    font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n    color: var(--diffs-addition-base);\n  }\n\n  [data-diffs-header='default'] [data-deletions-count] {\n    font-family: var(--diffs-font-family, var(--diffs-font-fallback));\n    color: var(--diffs-deletion-base);\n  }\n\n  [data-change-icon] {\n    fill: currentColor;\n    flex-shrink: 0;\n  }\n\n  [data-change-icon='change'],\n  [data-change-icon='rename-pure'],\n  [data-change-icon='rename-changed'] {\n    color: var(--diffs-modified-base);\n  }\n\n  [data-change-icon='new'] {\n    color: var(--diffs-addition-base);\n  }\n\n  [data-change-icon='deleted'] {\n    color: var(--diffs-deletion-base);\n  }\n\n  [data-change-icon='file'] {\n    opacity: 0.6;\n  }\n\n  [data-annotation-content] {\n    position: relative;\n    display: flow-root;\n    align-self: flex-start;\n    z-index: 2;\n    min-width: 0;\n    isolation: isolate;\n    /* Annotations contain prose, not code. The text must wrap in every\n     * overflow mode. Slotted annotation content inherits this white-space\n     * value. In scroll mode without this rule, the text inherits\n     * `white-space: pre` from the `pre` element. Then long text does not\n     * wrap. */\n    white-space: normal;\n  }\n\n  /* Sticky positioning has a composite costs, so we should _only_ pay it if we\n   * need to */\n  [data-overflow='scroll'] [data-annotation-content] {\n    position: sticky;\n    width: var(--diffs-column-content-width, auto);\n    left: var(--diffs-column-number-width, 0);\n  }\n\n  [data-overflow='scroll'] [data-merge-conflict-actions-content] {\n    position: sticky;\n    width: var(--diffs-column-content-width, auto);\n    left: var(--diffs-column-number-width, 0);\n  }\n\n  /* Undo some of the stuff that the 'pre' tag does */\n  [data-annotation-slot] {\n    text-wrap-mode: wrap;\n    word-break: normal;\n    white-space-collapse: collapse;\n  }\n\n  [data-gutter-utility-slot] {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    display: flex;\n    justify-content: flex-end;\n    touch-action: none;\n  }\n\n  [data-utility-button] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    appearance: none;\n    width: 1lh;\n    height: 1lh;\n    margin-right: calc((1lh - 1ch) * -1);\n    padding: 0;\n    cursor: pointer;\n    font-size: var(--diffs-font-size, 13px);\n    line-height: var(--diffs-line-height, 20px);\n    border-radius: 4px;\n    background-color: var(--diffs-modified-base);\n    color: var(--diffs-bg);\n    fill: currentColor;\n    position: relative;\n    z-index: 4;\n    touch-action: none;\n\n    &::before {\n      content: '';\n      display: block;\n      position: absolute;\n      inset: 0 0 0 -4px;\n    }\n  }\n\n  /* Decoration Bars */\n  /* --------------- */\n  [data-decoration-bar-stack] {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 6px;\n    pointer-events: none;\n    isolation: isolate;\n    z-index: 1;\n    background-color: var(--diffs-decoration-bar-color, transparent);\n    /* overflow: clip visible; */\n    box-sizing: content-box;\n    border-left: 2px solid var(--diffs-bg);\n    border-right: 2px solid var(--diffs-bg);\n\n    [data-decoration-bar-depth='1'] & {\n      background-color: color-mix(\n        in lab,\n        var(--diffs-bg) 20%,\n        var(--diffs-decoration-bar-color, transparent)\n      );\n    }\n\n    [data-decoration-bar-depth='2'] & {\n      background-color: color-mix(\n        in lab,\n        var(--diffs-bg) 45%,\n        var(--diffs-decoration-bar-color, transparent)\n      );\n    }\n\n    [data-decoration-bar-depth='3'] & {\n      background-color: color-mix(\n        in lab,\n        var(--diffs-bg) 65%,\n        var(--diffs-decoration-bar-color, transparent)\n      );\n    }\n\n    [data-decoration-bar-start] & {\n      border-top-left-radius: 5px;\n      border-top-right-radius: 5px;\n\n      /* &::before { */\n      /*   content: ''; */\n      /*   position: absolute; */\n      /*   box-sizing: content-box; */\n      /*   display: block; */\n      /*   width: 6px; */\n      /*   height: 6px; */\n      /*   z-index: 1; */\n      /*   border-top-left-radius: 3px; */\n      /*   border-top-right-radius: 3px; */\n      /*   border-top: 2px solid var(--diffs-bg); */\n      /*   border-left: 2px solid var(--diffs-bg); */\n      /*   border-right: 2px solid var(--diffs-bg); */\n      /*   left: -2px; */\n      /*   top: -2px; */\n      /* } */\n    }\n\n    [data-decoration-bar-end] & {\n      z-index: 3;\n      border-bottom-left-radius: 5px;\n      border-bottom-right-radius: 5px;\n\n      /* &::after { */\n      /*   content: ''; */\n      /*   position: absolute; */\n      /*   box-sizing: content-box; */\n      /*   display: block; */\n      /*   width: 6px; */\n      /*   height: 6px; */\n      /*   border-bottom-left-radius: 3px; */\n      /*   border-bottom-right-radius: 3px; */\n      /*   border-bottom: 2px solid var(--diffs-bg); */\n      /*   border-left: 2px solid var(--diffs-bg); */\n      /*   border-right: 2px solid var(--diffs-bg); */\n      /*   left: -2px; */\n      /*   bottom: -2px; */\n      /* } */\n    }\n\n    /* [data-decoration-bar-end] & { */\n    /*   border-bottom-left-radius: 5px; */\n    /*   border-bottom-right-radius: 5px; */\n    /*   border-bottom: 2px solid var(--diffs-bg); */\n    /*   border-left: 2px solid var(--diffs-bg); */\n    /*   border-right: 2px solid var(--diffs-bg); */\n    /*   right: -2px; */\n    /*   bottom: -2px; */\n    /*   z-index: 3; */\n    /* } */\n  }\n\n  [data-placeholder] {\n    contain: strict;\n  }\n\n  [data-error-wrapper] {\n    overflow: auto;\n    padding: var(--diffs-gap-block, var(--diffs-gap-fallback))\n      var(--diffs-gap-inline, var(--diffs-gap-fallback));\n    max-height: 400px;\n    scrollbar-width: none;\n\n    [data-error-message] {\n      font-weight: bold;\n      font-size: 18px;\n      color: var(--diffs-deletion-base);\n    }\n\n    [data-error-stack] {\n      color: var(--diffs-fg-number);\n    }\n  }\n}\n"],"mappings":";AAAA,IAAA,gBAAe"}

package/dist/types.d.ts

@@ -1,6 +1,11 @@
 import { ElementContent } from "./node_modules/.pnpm/@types_hast@3.0.4/node_modules/@types/hast/index.js";
-import { BundledLanguage, BundledTheme, CodeToHastOptions, DecorationItem, HighlighterGeneric, LanguageRegistration, ShikiTransformer, ThemeRegistration, ThemeRegistrationResolved, ThemedToken } from "shiki";
+import { DiffsTheme } from "./highlighter/themes/types.js";
+import { DiffsEditorTokenizer } from "./highlighter/DiffsEditorTokenizer.js";
+import { DiffsEditorTokenizerOptions, DiffsStreamTokenizer } from "./highlighter/tokenizer-types.js";
+import { DiffsHighlighter } from "./highlighter/DiffsHighlighter.js";
+import { CodeToHtmlOptions, CodeToTokensOptions, DecorationItem, ThemedToken, TokensResult } from "./highlighter/types.js";
 import { CreatePatchOptionsNonabortable } from "diff";
+import { BundledLanguage, BundledTheme } from "shiki";
 //#region src/types.d.ts
 type CodeViewScrollBehavior = 'instant' | 'smooth' | 'smooth-auto';
 /**
@@ -45,18 +50,10 @@ type MaybeDiffFileInput = DiffFileInput | {
   newFile?: undefined;
 };
 type FileDiffContentsLoader = (fileDiff: FileDiffMetadata) => Promise<FileDiffLoadedFiles>;
-type HighlighterTypes = 'shiki-js' | 'shiki-wasm';
+type HighlighterTypes = 'shiki-js' | 'shiki-wasm' | 'highlights';
 type HighlightedToken = [char: number, fg: string, text: string];
 type DiffsThemeNames = BundledTheme | (string & {});
 type ThemesType = Record<'dark' | 'light', DiffsThemeNames>;
-/**
- * A Shiki highlighter instance configured with the library's supported
- * languages and themes. Used internally to generate syntax-highlighted AST
- * from file contents. By default diffs will ensure that only 1 highlighter is
- * instantiated per thread and shared for all syntax highlighting.  This
- * applies to the main thread and worker threads.
- */
-type DiffsHighlighter = HighlighterGeneric<SupportedLanguages, DiffsThemeNames>;
 /**
  * Describes the type of change for a file in a diff.
  * - `change`: File content was modified, name unchanged.
@@ -285,6 +282,16 @@ interface FileDiffMetadata {
    * the patch.
    */
   additionLines: string[];
+  /**
+   * Total character count of every entry in `deletionLines`. Producers and
+   * anything that replaces or mutates `deletionLines` must keep it in sync.
+   */
+  deletionCharacterCount: number;
+  /**
+   * Total character count of every entry in `additionLines`. Producers and
+   * anything that replaces or mutates `additionLines` must keep it in sync.
+   */
+  additionCharacterCount: number;
   /**
    * Set while an attached editor's session-scoped hunk updates have reshaped
    * `hunks` away from a plain recompute (regions stay frozen during an edit
@@ -592,6 +599,7 @@ interface HunkExpansionRegion {
 }
 interface ForceDiffPlainTextOptions {
   forcePlainText: boolean;
+  lazyLineAST?: boolean;
   startingLine?: number;
   totalLines?: number;
   expandedHunks?: Map<number, HunkExpansionRegion> | true;
@@ -599,6 +607,7 @@ interface ForceDiffPlainTextOptions {
 }
 interface ForceFilePlainTextOptions {
   forcePlainText: boolean;
+  lazyLineAST?: boolean;
   startingLine?: number;
   totalLines?: number;
   lines?: string[];
@@ -766,5 +775,5 @@ interface StickySpecs {
   height: number;
 }
 //#endregion
-export { AnnotationLineMap, AnnotationSide, AnnotationSpan, AppliedThemeStyleCache, BaseCodeOptions, BaseDiffOptions, BaseDiffOptionsWithDefaults, type BundledLanguage, ChangeContent, ChangeTypes, CodeColumnType, type CodeToHastOptions, CodeViewDiffItem, CodeViewFileItem, CodeViewItem, CodeViewItemScrollTarget, CodeViewLayout, CodeViewLineScrollTarget, CodeViewPositionScrollTarget, CodeViewRangeScrollTarget, CodeViewScrollBehavior, CodeViewScrollTarget, ConflictResolverTypes, ContextContent, type CreatePatchOptionsNonabortable, CustomPreProperties, type DecorationItem, DiffAcceptRejectHunkConfig, DiffAcceptRejectHunkType, DiffFileInput, DiffIndicators, DiffLineAnnotation, DiffLineEventBaseProps, DiffTokenEventBaseProps, DiffsHighlighter, DiffsThemeNames, ExpansionDirections, ExtensionFormatMap, FileContents, FileDiffContentsLoader, FileDiffLoadedChangedFiles, FileDiffLoadedFiles, FileDiffLoadedPureRenamedFile, FileDiffMetadata, FileHeaderRenderMode, ForceDiffPlainTextOptions, ForceFilePlainTextOptions, GapSpan, HighlightedToken, HighlighterTypes, Hunk, HunkData, HunkExpansionRegion, HunkLineType, HunkSeparators, type LanguageRegistration, LineAnnotation, LineDiffTypes, LineEventBaseProps, LineInfo, LineSpans, LineTypes, MaybeDiffFileInput, MergeConflictActionPayload, MergeConflictMarkerRow, MergeConflictMarkerRowType, MergeConflictRegion, MergeConflictResolution, NumericScrollLineAnchor, ObservedAnnotationNodes, ObservedGridNodes, ParsedPatch, PendingCodeViewLayoutReset, PostRenderPhase, PrePropertiesConfig, ProcessFileConflictData, RenderDiffFilesResult, RenderDiffOptions, RenderDiffResult, RenderFileMetadata, RenderFileOptions, RenderFileResult, RenderHeaderFilenameSuffixCallback, RenderHeaderMetadataCallback, RenderHeaderPrefixCallback, RenderRange, RenderWindow, RenderedDiffASTCache, RenderedFileASTCache, SelectedLineRange, SelectionPoint, SelectionSide, SharedRenderState, type ShikiTransformer, SmoothScrollSettings, StickySpecs, SupportedLanguages, type ThemeRegistration, type ThemeRegistrationResolved, ThemeTypes, ThemedDiffResult, ThemedFileResult, type ThemedToken, ThemesType, TokenEventBase, VirtualFileMetrics, VirtualWindowSpecs };
+export { AnnotationLineMap, AnnotationSide, AnnotationSpan, AppliedThemeStyleCache, BaseCodeOptions, BaseDiffOptions, BaseDiffOptionsWithDefaults, ChangeContent, ChangeTypes, CodeColumnType, type CodeToHtmlOptions, type CodeToTokensOptions, CodeViewDiffItem, CodeViewFileItem, CodeViewItem, CodeViewItemScrollTarget, CodeViewLayout, CodeViewLineScrollTarget, CodeViewPositionScrollTarget, CodeViewRangeScrollTarget, CodeViewScrollBehavior, CodeViewScrollTarget, ConflictResolverTypes, ContextContent, type CreatePatchOptionsNonabortable, CustomPreProperties, type DecorationItem, DiffAcceptRejectHunkConfig, DiffAcceptRejectHunkType, DiffFileInput, DiffIndicators, DiffLineAnnotation, DiffLineEventBaseProps, DiffTokenEventBaseProps, type DiffsEditorTokenizer, type DiffsEditorTokenizerOptions, type DiffsHighlighter, type DiffsStreamTokenizer, type DiffsTheme, DiffsThemeNames, ExpansionDirections, ExtensionFormatMap, FileContents, FileDiffContentsLoader, FileDiffLoadedChangedFiles, FileDiffLoadedFiles, FileDiffLoadedPureRenamedFile, FileDiffMetadata, FileHeaderRenderMode, ForceDiffPlainTextOptions, ForceFilePlainTextOptions, GapSpan, HighlightedToken, HighlighterTypes, Hunk, HunkData, HunkExpansionRegion, HunkLineType, HunkSeparators, LineAnnotation, LineDiffTypes, LineEventBaseProps, LineInfo, LineSpans, LineTypes, MaybeDiffFileInput, MergeConflictActionPayload, MergeConflictMarkerRow, MergeConflictMarkerRowType, MergeConflictRegion, MergeConflictResolution, NumericScrollLineAnchor, ObservedAnnotationNodes, ObservedGridNodes, ParsedPatch, PendingCodeViewLayoutReset, PostRenderPhase, PrePropertiesConfig, ProcessFileConflictData, RenderDiffFilesResult, RenderDiffOptions, RenderDiffResult, RenderFileMetadata, RenderFileOptions, RenderFileResult, RenderHeaderFilenameSuffixCallback, RenderHeaderMetadataCallback, RenderHeaderPrefixCallback, RenderRange, RenderWindow, RenderedDiffASTCache, RenderedFileASTCache, SelectedLineRange, SelectionPoint, SelectionSide, SharedRenderState, SmoothScrollSettings, StickySpecs, SupportedLanguages, ThemeTypes, ThemedDiffResult, ThemedFileResult, type ThemedToken, ThemesType, TokenEventBase, type TokensResult, VirtualFileMetrics, VirtualWindowSpecs };
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../src/types.ts"],"mappings":";;;;KAiBY;;;;;UAMK;;;EAGf;;EAEA;;;EAGA,OAAO;;EAEP;;EAEA;;UAGe;EACf,SAAS;EACT,SAAS;;UAGM;EACf;EACA,SAAS;;KAGC,sBACR,6BACA;KAEQ;EACN,SAAS;EAAc,SAAS;;EAChC;EAAe,SAAS;;EACxB,SAAS;EAAc;;KAEjB,qBACR;EACE;EAAqB;;KAEf,0BACV,UAAU,qBACP,QAAQ;KAED;KAEA,oBAAoB,cAAc,YAAY;KAe9C,kBAAkB;KAElB,aAAa,yBAAyB;;;;;;;;KAStC,mBAAmB,mBAC7B,oBACA;;;;;;;;;KAWU;;;;;UAWK;;;EAGf;;EAEA,OAAO;;;;;;;UAQQ;EACf;;EAEA;;;;;EAKA;;;;;EAKA;;;;;;;UAQe;EACf;;EAEA;;;;;EAKA;;EAEA;;;;;EAKA;;;;;;UAOe;;;;;EAKf;;;;;EAMA;;;;;;;;EAQA;;EAEA;;;;;EAKA;;;;;EAMA;;;;;;;;EAQA;;EAEA;;;;;EAKA;;;;;EAMA,cAAc,iBAAiB;;;;;EAK/B;;EAEA;;;;;EAMA;;EAEA;;EAGA;;EAEA;;;;;;;;EASA;;;;;;;;EAQA;;;;;;;;;;UAWe;;EAEf;;EAEA;;;;;;;EAOA,OAAO;;;;;EAMP;;;;;EAKA;;;;;EAMA;;EAEA;;EAGA,MAAM;;;EAIN,OAAO;;EAEP;;EAEA;;;;;;;;;;;;;;EAeA;;;;;;;;EASA;;;;;;;;EAQA;;;;;;;;;;EAUA;;;;;;;;;;;;EAYA;;KAGU;UAMK;EACf,MAAM;EACN;;EAEA;EACA;EACA;;EAEA;;KAGU,qBACR;KAMQ;KAOA;KAEA;;;;KAKA;KAOA;KAEA;UAEK;EACf,QAAQ,kBAAkB;EAC1B;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EAGA,uBAAuB;EACvB;EACA;EACA;EACA;EAGA;;UAGe,wBAAwB;EACvC;EACA,iBAAiB;EACjB;EACA,iBAAiB;EACjB;;;;;;;EAOA,gBAAgB;EAEhB;EAIA,eAAe;EACf;EAGA;;;;;;EAOA,mBAAmB;;KAGT,8BAA8B,SACxC,KACE;KAKQ,sBAAsB;UAKjB,4BAA4B,SAC3C,KACE;EAIF;EACA;EACA;EACA,mBAAmB;;KAGT;KAEA,gCACV,UAAU,qBACP;KAEO,8BACV,UAAU,qBACP;KAEO,sCACV,UAAU,qBACP;KAEO,sBACV,MAAM,iBACH;KAEO,qBAAqB,eAAe;KAEpC;KACA;UAEK;EACf;EACA,OAAO;EACP;EACA,UAAU;;KAGP,iBAAiB,eAAe;EAC/B;;EACA,UAAU;;;;;;KAMJ,eAAe;EACzB;IACE,iBAAiB;;;;;KAMT,mBAAmB;EAC7B,MAAM;EACN;IACE,iBAAiB;KAET,iBAAiB;EAC3B;EACA;EACA,MAAM;EACN,cAAc,eAAe;EAC7B;EACA;;;;;;EAMA;;KAGU,iBAAiB;EAC3B;EACA;EACA,UAAU;EACV,cAAc,mBAAmB;EACjC;EACA;;;;;;EAMA;;KAGU,aAAa,eACrB,iBAAiB,eACjB,iBAAiB;UAEJ;EACf;EACA;EACA,WAAW;;UAGI;EACf;EACA;EACA;EACA,OAAO;EACP;EACA;EACA,WAAW;;UAGI;EACf;EACA;EACA,OAAO;EACP;EACA;EACA,WAAW;;UAGI;EACf;EACA;EACA,OAAO;;UAGQ;EACf;EACA;EACA;EACA;EACA,WAAW;;KAGD,uBACR,+BACA,2BACA,4BACA;KAEQ;UAEK;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;UAGe;EACf,YAAY;EACZ,UAAU;;UAGK;EACf;EACA;;KAGU,YAAY,UAAU;KAKtB;UAMK;EACf,MAAM;EACN;EACA;EACA;;UAGe;EACf,WAAW,4BAA4B,4BAA4B;;UAGpD;EACf;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA,aAAa;EACb,eAAe;EACf;;UAGe,+BAA+B,KAC9C;EAGA;EACA,gBAAgB;EAChB,UAAU;;UAGK;EACf;EACA;EACA;EACA;EACA;EACA,cAAc;;UAGC,gCAAgC;EAC/C,MAAM;;UAGS;EACf;EACA;IACE,WAAW;IACX,OAAO;IACP;;EAEF;IACE,WAAW;IACX,OAAO;IACP;;EAEF;;UAGe;EACf;EACA,aAAa;EACb,eAAe;EACf;EACA;EACA;;KAGU;UAEK;EACf;EACA;EACA;EACA;EACA,MAAM;EACN;IACE;IACA;IACA;;;KAIQ,kBAAkB,eAAe,eAE3C,mBAAmB;KAGT;UAEK;EACf,MAAM;EACN;EACA;;UAGe;EACf,eAAe;EACf,eAAe;;UAGA;EACf,MAAM;EACN;EACA;;UAGe;EACf;EACA;;UAGe;EACf;EACA;EACA;EACA,gBAAgB,YAAY;EAC5B;;UAGe;EACf;EACA;EACA;EAEA;;UAGe;EACf,OAAO,kBAAkB,yBAAyB;EAClD;EACA;;UAGe;EACf,OAAO,kBAAkB,yBAAyB;EAClD;EACA;EACA,cAAc;EACd;;UAGe;EACf,QAAQ;EACR,SAAS;;UAGM;EACf,QAAQ;EACR,SAAS;;UAGM;EACf,MAAM;EACN;EACA,SAAS;EACT,QAAQ;EACR,aAAa;EACb;;UAGe;EACf,MAAM;EACN;EACA,SAAS;EACT,QAAQ;EACR,aAAa;EACb;;;;;;;;;;;;;UAce;EACf;EACA;EACA;EACA;;UAGe;EACf;EACA;;UAGe;;EAEf;;EAEA;;UAGe;;EAEf;;EAEA;;EAEA;;;EAGA;;;EAGA;;;;EAIA;;;EAGA;;UAGe;EACf,UAAU;EACV;EACA;EACA;;UAGe;;EAEf;;EAEA;;EAEA;;UAGe;;;;;;EAMf;;;;;;EAMA;;;;;;EAMA;;UAGe;EACf;EACA,MAAM;;KAGI;KAEA;UAEK;EACf,MAAM;EACN;;;;;;;;;UAUe;;EAEf;;EAGA;;EAGA;;EAGA;;EAGA;;EAGA;;EAGA;;UAGe;EACf,OAAO,kBAAkB;EACzB;EACA,WAAW;EACX;EACA;;UAGe;EACf;EACA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../src/types.ts"],"mappings":";;;;;;;;;KAmBY;;;;;UAMK;;;EAGf;;EAEA;;;EAGA,OAAO;;EAEP;;EAEA;;UAGe;EACf,SAAS;EACT,SAAS;;UAGM;EACf;EACA,SAAS;;KAGC,sBACR,6BACA;KAEQ;EACN,SAAS;EAAc,SAAS;;EAChC;EAAe,SAAS;;EACxB,SAAS;EAAc;;KAEjB,qBACR;EACE;EAAqB;;KAEf,0BACV,UAAU,qBACP,QAAQ;KAED;KAEA,oBAAoB,cAAc,YAAY;KAI9C,kBAAkB;KAElB,aAAa,yBAAyB;;;;;;;;;KAUtC;;;;;UAWK;;;EAGf;;EAEA,OAAO;;;;;;;UAQQ;EACf;;EAEA;;;;;EAKA;;;;;EAKA;;;;;;;UAQe;EACf;;EAEA;;;;;EAKA;;EAEA;;;;;EAKA;;;;;;UAOe;;;;;EAKf;;;;;EAMA;;;;;;;;EAQA;;EAEA;;;;;EAKA;;;;;EAMA;;;;;;;;EAQA;;EAEA;;;;;EAKA;;;;;EAMA,cAAc,iBAAiB;;;;;EAK/B;;EAEA;;;;;EAMA;;EAEA;;EAGA;;EAEA;;;;;;;;EASA;;;;;;;;EAQA;;;;;;;;;;UAWe;;EAEf;;EAEA;;;;;;;EAOA,OAAO;;;;;EAMP;;;;;EAKA;;;;;EAMA;;EAEA;;EAGA,MAAM;;;EAIN,OAAO;;EAEP;;EAEA;;;;;;;;;;;;;;EAeA;;;;;;;;EASA;;;;;;;;EAQA;;;;;EAKA;;;;;EAKA;;;;;;;;;;EAUA;;;;;;;;;;;;EAYA;;KAGU;UAMK;EACf,MAAM;EACN;;EAEA;EACA;EACA;;EAEA;;KAGU,qBACR;KAMQ;KAOA;KAEA;;;;KAKA;KAOA;KAEA;UAEK;EACf,QAAQ,kBAAkB;EAC1B;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EAGA,uBAAuB;EACvB;EACA;EACA;EACA;EAGA;;UAGe,wBAAwB;EACvC;EACA,iBAAiB;EACjB;EACA,iBAAiB;EACjB;;;;;;;EAOA,gBAAgB;EAEhB;EAIA,eAAe;EACf;EAGA;;;;;;EAOA,mBAAmB;;KAGT,8BAA8B,SACxC,KACE;KAKQ,sBAAsB;UAKjB,4BAA4B,SAC3C,KACE;EAIF;EACA;EACA;EACA,mBAAmB;;KAGT;KAEA,gCACV,UAAU,qBACP;KAEO,8BACV,UAAU,qBACP;KAEO,sCACV,UAAU,qBACP;KAEO,sBACV,MAAM,iBACH;KAEO,qBAAqB,eAAe;KAEpC;KACA;UAEK;EACf;EACA,OAAO;EACP;EACA,UAAU;;KAGP,iBAAiB,eAAe;EAC/B;;EACA,UAAU;;;;;;KAMJ,eAAe;EACzB;IACE,iBAAiB;;;;;KAMT,mBAAmB;EAC7B,MAAM;EACN;IACE,iBAAiB;KAET,iBAAiB;EAC3B;EACA;EACA,MAAM;EACN,cAAc,eAAe;EAC7B;EACA;;;;;;EAMA;;KAGU,iBAAiB;EAC3B;EACA;EACA,UAAU;EACV,cAAc,mBAAmB;EACjC;EACA;;;;;;EAMA;;KAGU,aAAa,eACrB,iBAAiB,eACjB,iBAAiB;UAEJ;EACf;EACA;EACA,WAAW;;UAGI;EACf;EACA;EACA;EACA,OAAO;EACP;EACA;EACA,WAAW;;UAGI;EACf;EACA;EACA,OAAO;EACP;EACA;EACA,WAAW;;UAGI;EACf;EACA;EACA,OAAO;;UAGQ;EACf;EACA;EACA;EACA;EACA,WAAW;;KAGD,uBACR,+BACA,2BACA,4BACA;KAEQ;UAEK;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;UAGe;EACf,YAAY;EACZ,UAAU;;UAGK;EACf;EACA;;KAGU,YAAY,UAAU;KAKtB;UAMK;EACf,MAAM;EACN;EACA;EACA;;UAGe;EACf,WAAW,4BAA4B,4BAA4B;;UAGpD;EACf;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA,aAAa;EACb,eAAe;EACf;;UAGe,+BAA+B,KAC9C;EAGA;EACA,gBAAgB;EAChB,UAAU;;UAGK;EACf;EACA;EACA;EACA;EACA;EACA,cAAc;;UAGC,gCAAgC;EAC/C,MAAM;;UAGS;EACf;EACA;IACE,WAAW;IACX,OAAO;IACP;;EAEF;IACE,WAAW;IACX,OAAO;IACP;;EAEF;;UAGe;EACf;EACA,aAAa;EACb,eAAe;EACf;EACA;EACA;;KAGU;UAEK;EACf;EACA;EACA;EACA;EACA,MAAM;EACN;IACE;IACA;IACA;;;KAIQ,kBAAkB,eAAe,eAE3C,mBAAmB;KAGT;UAEK;EACf,MAAM;EACN;EACA;;UAGe;EACf,eAAe;EACf,eAAe;;UAGA;EACf,MAAM;EACN;EACA;;UAGe;EACf;EACA;;UAGe;EACf;EACA;EACA;EACA;EACA,gBAAgB,YAAY;EAC5B;;UAGe;EACf;EACA;EACA;EACA;EAEA;;UAGe;EACf,OAAO,kBAAkB,yBAAyB;EAClD;EACA;;UAGe;EACf,OAAO,kBAAkB,yBAAyB;EAClD;EACA;EACA,cAAc;EACd;;UAGe;EACf,QAAQ;EACR,SAAS;;UAGM;EACf,QAAQ;EACR,SAAS;;UAGM;EACf,MAAM;EACN;EACA,SAAS;EACT,QAAQ;EACR,aAAa;EACb;;UAGe;EACf,MAAM;EACN;EACA,SAAS;EACT,QAAQ;EACR,aAAa;EACb;;;;;;;;;;;;;UAce;EACf;EACA;EACA;EACA;;UAGe;EACf;EACA;;UAGe;;EAEf;;EAEA;;UAGe;;EAEf;;EAEA;;EAEA;;;EAGA;;;EAGA;;;;EAIA;;;EAGA;;UAGe;EACf,UAAU;EACV;EACA;EACA;;UAGe;;EAEf;;EAEA;;EAEA;;UAGe;;;;;;EAMf;;;;;;EAMA;;;;;;EAMA;;UAGe;EACf;EACA,MAAM;;KAGI;KAEA;UAEK;EACf,MAAM;EACN;;;;;;;;;UAUe;;EAEf;;EAGA;;EAGA;;EAGA;;EAGA;;EAGA;;EAGA;;UAGe;EACf,OAAO,kBAAkB;EACzB;EACA,WAAW;EACX;EACA;;UAGe;EACf;EACA"}

package/dist/utils/canUseWASM.d.ts

@@ -0,0 +1,13 @@
+//#region src/utils/canUseWASM.d.ts
+/**
+ * Whether WebAssembly, including SIMD, can be compiled and instantiated
+ * synchronously. The `highlights` and `shiki-wasm` highlighters need
+ * WebAssembly, so use this to fall back to `shiki-js` in environments that lack
+ * it or block it (for example, a CSP without `wasm-unsafe-eval`). SIMD is
+ * required because `highlights` uses it; engines without it (such as Safari
+ * before 16.4) report false. The result is cached after the first call.
+ */
+declare function canUseWASM(): boolean;
+//#endregion
+export { canUseWASM };
+//# sourceMappingURL=canUseWASM.d.ts.map

package/dist/utils/canUseWASM.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canUseWASM.d.ts","names":[],"sources":["../../src/utils/canUseWASM.ts"],"mappings":";;;;;;;;;iBAUgB"}

package/dist/utils/canUseWASM.js

@@ -0,0 +1,59 @@
+//#region src/utils/canUseWASM.ts
+let canUseWASMResult;
+/**
+* Whether WebAssembly, including SIMD, can be compiled and instantiated
+* synchronously. The `highlights` and `shiki-wasm` highlighters need
+* WebAssembly, so use this to fall back to `shiki-js` in environments that lack
+* it or block it (for example, a CSP without `wasm-unsafe-eval`). SIMD is
+* required because `highlights` uses it; engines without it (such as Safari
+* before 16.4) report false. The result is cached after the first call.
+*/
+function canUseWASM() {
+	return canUseWASMResult ??= probeWASM();
+}
+function probeWASM() {
+	try {
+		if (typeof WebAssembly !== "object") return false;
+		const wasmModule = new WebAssembly.Module(new Uint8Array([
+			0,
+			97,
+			115,
+			109,
+			1,
+			0,
+			0,
+			0,
+			1,
+			5,
+			1,
+			96,
+			0,
+			1,
+			123,
+			3,
+			2,
+			1,
+			0,
+			10,
+			10,
+			1,
+			8,
+			0,
+			65,
+			0,
+			253,
+			15,
+			253,
+			98,
+			11
+		]));
+		new WebAssembly.Instance(wasmModule);
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+export { canUseWASM };
+
+//# sourceMappingURL=canUseWASM.js.map

package/dist/utils/canUseWASM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canUseWASM.js","names":[],"sources":["../../src/utils/canUseWASM.ts"],"sourcesContent":["let canUseWASMResult: boolean | undefined;\n\n/**\n * Whether WebAssembly, including SIMD, can be compiled and instantiated\n * synchronously. The `highlights` and `shiki-wasm` highlighters need\n * WebAssembly, so use this to fall back to `shiki-js` in environments that lack\n * it or block it (for example, a CSP without `wasm-unsafe-eval`). SIMD is\n * required because `highlights` uses it; engines without it (such as Safari\n * before 16.4) report false. The result is cached after the first call.\n */\nexport function canUseWASM(): boolean {\n  return (canUseWASMResult ??= probeWASM());\n}\n\nfunction probeWASM(): boolean {\n  try {\n    if (typeof WebAssembly !== 'object') {\n      return false;\n    }\n    // A module with one function, `(func (result v128) i32.const 0\n    // i8x16.splat i8x16.popcnt)`. Compiling it fails without SIMD support, and\n    // compiling or instantiating fails when a CSP blocks WebAssembly.\n    const wasmModule = new WebAssembly.Module(\n      new Uint8Array([\n        0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x05, 0x01, 0x60,\n        0x00, 0x01, 0x7b, 0x03, 0x02, 0x01, 0x00, 0x0a, 0x0a, 0x01, 0x08, 0x00,\n        0x41, 0x00, 0xfd, 0x0f, 0xfd, 0x62, 0x0b,\n      ])\n    );\n    new WebAssembly.Instance(wasmModule);\n    return true;\n  } catch {\n    return false;\n  }\n}\n"],"mappings":";AAAA,IAAI;;;;;;;;;AAUJ,SAAgB,aAAsB;CACpC,OAAQ,qBAAqB,UAAU;AACzC;AAEA,SAAS,YAAqB;CAC5B,IAAI;EACF,IAAI,OAAO,gBAAgB,UACzB,OAAO;EAKT,MAAM,aAAa,IAAI,YAAY,OACjC,IAAI,WAAW;GACb;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAClE;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAClE;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;EACtC,CAAC,CACH;EACA,IAAI,YAAY,SAAS,UAAU;EACnC,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF"}

package/dist/utils/createSpanNodeFromToken.d.ts

@@ -1,6 +1,7 @@
-import { ThemedToken } from "shiki";
+import { ThemedToken } from "../highlighter/types.js";
+import "../types.js";
 //#region src/utils/createSpanNodeFromToken.d.ts
-declare function createSpanFromToken(token: ThemedToken): HTMLSpanElement;
+declare function createSpanFromToken(token: ThemedToken, cacheHtmlStyle: boolean): HTMLSpanElement;
 //#endregion
 export { createSpanFromToken };
 //# sourceMappingURL=createSpanNodeFromToken.d.ts.map

package/dist/utils/createSpanNodeFromToken.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSpanNodeFromToken.d.ts","names":[],"sources":["../../src/utils/createSpanNodeFromToken.ts"],"mappings":";;iBAMgB,oBAAoB,OAAO,cAAc"}
+{"version":3,"file":"createSpanNodeFromToken.d.ts","names":[],"sources":["../../src/utils/createSpanNodeFromToken.ts"],"mappings":";;;iBAGgB,oBACd,OAAO,aACP,0BACC"}

package/dist/utils/createSpanNodeFromToken.js

@@ -1,10 +1,9 @@
-import { getTokenStyleObject, stringifyTokenStyle } from "shiki";
+import { tokenStyle } from "./tokenStyle.js";
 //#region src/utils/createSpanNodeFromToken.ts
-function createSpanFromToken(token) {
+function createSpanFromToken(token, cacheHtmlStyle) {
 	const element = document.createElement("span");
-	const style = token.htmlStyle ?? getTokenStyleObject(token);
-	element.style = stringifyTokenStyle(style);
-	element.textContent = token.content;
+	element.setAttribute("style", tokenStyle(token, cacheHtmlStyle));
+	element.textContent = token.content === "\r" ? "" : token.content;
 	return element;
 }
 //#endregion

package/dist/utils/createSpanNodeFromToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"createSpanNodeFromToken.js","names":[],"sources":["../../src/utils/createSpanNodeFromToken.ts"],"sourcesContent":["import {\n  getTokenStyleObject,\n  stringifyTokenStyle,\n  type ThemedToken,\n} from 'shiki';\n\nexport function createSpanFromToken(token: ThemedToken): HTMLSpanElement {\n  const element = document.createElement('span');\n  const style = token.htmlStyle ?? getTokenStyleObject(token);\n  element.style = stringifyTokenStyle(style);\n  element.textContent = token.content;\n  return element;\n}\n"],"mappings":";;AAMA,SAAgB,oBAAoB,OAAqC;CACvE,MAAM,UAAU,SAAS,cAAc,MAAM;CAC7C,MAAM,QAAQ,MAAM,aAAa,oBAAoB,KAAK;CAC1D,QAAQ,QAAQ,oBAAoB,KAAK;CACzC,QAAQ,cAAc,MAAM;CAC5B,OAAO;AACT"}
+{"version":3,"file":"createSpanNodeFromToken.js","names":[],"sources":["../../src/utils/createSpanNodeFromToken.ts"],"sourcesContent":["import type { ThemedToken } from '../types';\nimport { tokenStyle } from './tokenStyle';\n\nexport function createSpanFromToken(\n  token: ThemedToken,\n  cacheHtmlStyle: boolean\n): HTMLSpanElement {\n  const element = document.createElement('span');\n  // setAttribute lets Blink share parsed styles; style.cssText prevents reuse.\n  element.setAttribute('style', tokenStyle(token, cacheHtmlStyle));\n  // CR renders as a space under white-space: pre. Keep its span empty but\n  // retain the node so token recalls remove the correct number of children.\n  element.textContent = token.content === '\\r' ? '' : token.content;\n  return element;\n}\n"],"mappings":";;AAGA,SAAgB,oBACd,OACA,gBACiB;CACjB,MAAM,UAAU,SAAS,cAAc,MAAM;CAE7C,QAAQ,aAAa,SAAS,WAAW,OAAO,cAAc,CAAC;CAG/D,QAAQ,cAAc,MAAM,YAAY,OAAO,KAAK,MAAM;CAC1D,OAAO;AACT"}

package/dist/utils/cssWrappers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cssWrappers.d.ts","names":[],"sources":["../../src/utils/cssWrappers.ts"],"mappings":";;iBAUgB,YAAY;iBAQZ,cAAc;iBAOd,aACd,kBACA,YAAW,YACX;iBAmBc,yBACd,kBACA"}
+{"version":3,"file":"cssWrappers.d.ts","names":[],"sources":["../../src/utils/cssWrappers.ts"],"mappings":";;iBAUgB,YAAY;iBAQZ,cAAc;iBAOd,aACd,kBACA,YAAW,YACX;iBAqCc,yBACd,kBACA"}

package/dist/utils/cssWrappers.js

@@ -21,7 +21,19 @@ function wrapThemeCSS(themeCSS, themeType = "system", scrollbarGutter) {
 	const colorSchemeRule = themeType === "system" ? "" : `
   color-scheme: ${themeType};`;
 	const scrollbarGutterVar = createMeasuredScrollbarGutterDeclaration(scrollbarGutter);
+	const tokenFontStyles = (themeType === "system" ? ["light", "dark"] : [themeType]).map((type) => {
+		const styles = `
+  [data-line] span, [data-edit-prediction-suffix] span {
+    font-weight: var(--diffs-token-${type}-font-weight, inherit);
+    font-style: var(--diffs-token-${type}-font-style, inherit);
+    text-decoration: var(--diffs-token-${type}-text-decoration, inherit);
+  }`;
+		return themeType === "system" && type === "dark" ? `@media (prefers-color-scheme: dark) {${styles}\n}` : styles;
+	}).join("\n");
 	return `${LAYER_ORDER}
+@layer base {
+  ${tokenFontStyles}
+}
 @layer rendered {
   :host {${colorSchemeRule}
   ${scrollbarGutterVar}

package/dist/utils/cssWrappers.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssWrappers.js","names":["rawStyles"],"sources":["../../src/utils/cssWrappers.ts"],"sourcesContent":["import { DIFFS_SCROLLBAR_GUTTER_MEASURED_PROPERTY } from '../constants';\nimport rawStyles from '../style.css?inline';\nimport type { ThemeTypes } from '../types';\nimport { createMeasuredScrollbarGutterDeclaration } from './scrollbarGutter';\n\nconst LAYER_ORDER = `@layer base, theme, rendered, unsafe;`;\nconst SCROLLBAR_GUTTER_DECLARATION_PATTERN = new RegExp(\n  `${escapeRegExp(DIFFS_SCROLLBAR_GUTTER_MEASURED_PROPERTY)}\\\\s*:\\\\s*[^;]+;`\n);\n\nexport function wrapCoreCSS(mainCSS: string) {\n  return `${LAYER_ORDER}\n${rawStyles}\n@layer theme {\n  ${mainCSS}\n}`;\n}\n\nexport function wrapUnsafeCSS(unsafeCSS: string) {\n  return `${LAYER_ORDER}\n@layer unsafe {\n  ${unsafeCSS}\n}`;\n}\n\nexport function wrapThemeCSS(\n  themeCSS: string,\n  themeType: ThemeTypes = 'system',\n  scrollbarGutter?: number\n) {\n  const colorSchemeRule =\n    themeType === 'system'\n      ? ''\n      : `\n  color-scheme: ${themeType};`;\n  const scrollbarGutterVar =\n    createMeasuredScrollbarGutterDeclaration(scrollbarGutter);\n\n  return `${LAYER_ORDER}\n@layer rendered {\n  :host {${colorSchemeRule}\n  ${scrollbarGutterVar}\n  ${themeCSS}\n  }\n}`;\n}\n\nexport function patchScrollbarGutterSize(\n  themeCSS: string,\n  scrollbarGutter: number | undefined\n): string {\n  const scrollbarGutterRule =\n    createMeasuredScrollbarGutterDeclaration(scrollbarGutter);\n  return themeCSS.replace(\n    SCROLLBAR_GUTTER_DECLARATION_PATTERN,\n    scrollbarGutterRule\n  );\n}\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n"],"mappings":";;;;AAKA,MAAM,cAAc;AACpB,MAAM,uCAAuC,IAAI,OAC/C,GAAG,aAAa,wCAAwC,EAAE,gBAC5D;AAEA,SAAgB,YAAY,SAAiB;CAC3C,OAAO,GAAG,YAAY;EACtBA,cAAU;;IAER,QAAQ;;AAEZ;AAEA,SAAgB,cAAc,WAAmB;CAC/C,OAAO,GAAG,YAAY;;IAEpB,UAAU;;AAEd;AAEA,SAAgB,aACd,UACA,YAAwB,UACxB,iBACA;CACA,MAAM,kBACJ,cAAc,WACV,KACA;kBACU,UAAU;CAC1B,MAAM,qBACJ,yCAAyC,eAAe;CAE1D,OAAO,GAAG,YAAY;;WAEb,gBAAgB;IACvB,mBAAmB;IACnB,SAAS;;;AAGb;AAEA,SAAgB,yBACd,UACA,iBACQ;CACR,MAAM,sBACJ,yCAAyC,eAAe;CAC1D,OAAO,SAAS,QACd,sCACA,mBACF;AACF;AAEA,SAAS,aAAa,OAAuB;CAC3C,OAAO,MAAM,QAAQ,uBAAuB,MAAM;AACpD"}
+{"version":3,"file":"cssWrappers.js","names":["rawStyles"],"sources":["../../src/utils/cssWrappers.ts"],"sourcesContent":["import { DIFFS_SCROLLBAR_GUTTER_MEASURED_PROPERTY } from '../constants';\nimport rawStyles from '../style.css?inline';\nimport type { ThemeTypes } from '../types';\nimport { createMeasuredScrollbarGutterDeclaration } from './scrollbarGutter';\n\nconst LAYER_ORDER = `@layer base, theme, rendered, unsafe;`;\nconst SCROLLBAR_GUTTER_DECLARATION_PATTERN = new RegExp(\n  `${escapeRegExp(DIFFS_SCROLLBAR_GUTTER_MEASURED_PROPERTY)}\\\\s*:\\\\s*[^;]+;`\n);\n\nexport function wrapCoreCSS(mainCSS: string) {\n  return `${LAYER_ORDER}\n${rawStyles}\n@layer theme {\n  ${mainCSS}\n}`;\n}\n\nexport function wrapUnsafeCSS(unsafeCSS: string) {\n  return `${LAYER_ORDER}\n@layer unsafe {\n  ${unsafeCSS}\n}`;\n}\n\nexport function wrapThemeCSS(\n  themeCSS: string,\n  themeType: ThemeTypes = 'system',\n  scrollbarGutter?: number\n) {\n  const colorSchemeRule =\n    themeType === 'system'\n      ? ''\n      : `\n  color-scheme: ${themeType};`;\n  const scrollbarGutterVar =\n    createMeasuredScrollbarGutterDeclaration(scrollbarGutter);\n  const tokenFontStyles = (\n    themeType === 'system' ? ['light', 'dark'] : [themeType]\n  )\n    .map((type) => {\n      const styles = `\n  [data-line] span, [data-edit-prediction-suffix] span {\n    font-weight: var(--diffs-token-${type}-font-weight, inherit);\n    font-style: var(--diffs-token-${type}-font-style, inherit);\n    text-decoration: var(--diffs-token-${type}-text-decoration, inherit);\n  }`;\n      return themeType === 'system' && type === 'dark'\n        ? `@media (prefers-color-scheme: dark) {${styles}\\n}`\n        : styles;\n    })\n    .join('\\n');\n\n  return `${LAYER_ORDER}\n@layer base {\n  ${tokenFontStyles}\n}\n@layer rendered {\n  :host {${colorSchemeRule}\n  ${scrollbarGutterVar}\n  ${themeCSS}\n  }\n}`;\n}\n\nexport function patchScrollbarGutterSize(\n  themeCSS: string,\n  scrollbarGutter: number | undefined\n): string {\n  const scrollbarGutterRule =\n    createMeasuredScrollbarGutterDeclaration(scrollbarGutter);\n  return themeCSS.replace(\n    SCROLLBAR_GUTTER_DECLARATION_PATTERN,\n    scrollbarGutterRule\n  );\n}\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n"],"mappings":";;;;AAKA,MAAM,cAAc;AACpB,MAAM,uCAAuC,IAAI,OAC/C,GAAG,aAAa,wCAAwC,EAAE,gBAC5D;AAEA,SAAgB,YAAY,SAAiB;CAC3C,OAAO,GAAG,YAAY;EACtBA,cAAU;;IAER,QAAQ;;AAEZ;AAEA,SAAgB,cAAc,WAAmB;CAC/C,OAAO,GAAG,YAAY;;IAEpB,UAAU;;AAEd;AAEA,SAAgB,aACd,UACA,YAAwB,UACxB,iBACA;CACA,MAAM,kBACJ,cAAc,WACV,KACA;kBACU,UAAU;CAC1B,MAAM,qBACJ,yCAAyC,eAAe;CAC1D,MAAM,mBACJ,cAAc,WAAW,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,EAAA,CAEtD,KAAK,SAAS;EACb,MAAM,SAAS;;qCAEgB,KAAK;oCACN,KAAK;yCACA,KAAK;;EAExC,OAAO,cAAc,YAAY,SAAS,SACtC,wCAAwC,OAAO,OAC/C;CACN,CAAC,CAAC,CACD,KAAK,IAAI;CAEZ,OAAO,GAAG,YAAY;;IAEpB,gBAAgB;;;WAGT,gBAAgB;IACvB,mBAAmB;IACnB,SAAS;;;AAGb;AAEA,SAAgB,yBACd,UACA,iBACQ;CACR,MAAM,sBACJ,yCAAyC,eAAe;CAC1D,OAAO,SAAS,QACd,sCACA,mBACF;AACF;AAEA,SAAS,aAAa,OAAuB;CAC3C,OAAO,MAAM,QAAQ,uBAAuB,MAAM;AACpD"}

package/dist/utils/getCodeViewItemRenderData.d.ts

@@ -0,0 +1,10 @@
+import { FileRenderData } from "../components/File.js";
+import { FileDiffRenderData } from "../components/FileDiff.js";
+import { CodeViewRenderedDiffItem, CodeViewRenderedFileItem, CodeViewRenderedItem } from "../components/CodeView.js";
+//#region src/utils/getCodeViewItemRenderData.d.ts
+declare function getCodeViewItemRenderData<LAnnotation, Caret>(renderedItem: CodeViewRenderedDiffItem<LAnnotation, Caret>): FileDiffRenderData<LAnnotation>;
+declare function getCodeViewItemRenderData<LAnnotation, Caret>(renderedItem: CodeViewRenderedFileItem<LAnnotation, Caret>): FileRenderData<LAnnotation>;
+declare function getCodeViewItemRenderData<LAnnotation, Caret>(renderedItem: CodeViewRenderedItem<LAnnotation, Caret>): FileDiffRenderData<LAnnotation> | FileRenderData<LAnnotation>;
+//#endregion
+export { getCodeViewItemRenderData };
+//# sourceMappingURL=getCodeViewItemRenderData.d.ts.map

package/dist/utils/getCodeViewItemRenderData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCodeViewItemRenderData.d.ts","names":[],"sources":["../../src/utils/getCodeViewItemRenderData.ts"],"mappings":";;;;iBAWgB,0BAA0B,aAAa,OACrD,cAAc,yBAAyB,aAAa,SACnD,mBAAmB;iBACN,0BAA0B,aAAa,OACrD,cAAc,yBAAyB,aAAa,SACnD,eAAe;iBACF,0BAA0B,aAAa,OACrD,cAAc,qBAAqB,aAAa,SAC/C,mBAAmB,eAAe,eAAe"}

package/dist/utils/getCodeViewItemRenderData.js

@@ -0,0 +1,19 @@
+//#region src/utils/getCodeViewItemRenderData.ts
+function getCodeViewItemRenderData(renderedItem) {
+	if (renderedItem.type === "diff") {
+		const { instance, item } = renderedItem;
+		return instance.__getNextRenderData({
+			fileDiff: instance.fileDiff ?? item.fileDiff,
+			lineAnnotations: void 0
+		});
+	}
+	const { instance, item } = renderedItem;
+	return instance.__getNextRenderData({
+		file: instance.file ?? item.file,
+		lineAnnotations: void 0
+	});
+}
+//#endregion
+export { getCodeViewItemRenderData };
+
+//# sourceMappingURL=getCodeViewItemRenderData.js.map

package/dist/utils/getCodeViewItemRenderData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCodeViewItemRenderData.js","names":[],"sources":["../../src/utils/getCodeViewItemRenderData.ts"],"sourcesContent":["import type {\n  CodeViewRenderedDiffItem,\n  CodeViewRenderedFileItem,\n  CodeViewRenderedItem,\n} from '../components/CodeView';\nimport type { FileRenderData } from '../components/File';\nimport type { FileDiffRenderData } from '../components/FileDiff';\n\n// Return the data a rendered item's next render will display. CodeView applies\n// item changes to the instance before rendering it, so the instance's own\n// input describes that render.\nexport function getCodeViewItemRenderData<LAnnotation, Caret>(\n  renderedItem: CodeViewRenderedDiffItem<LAnnotation, Caret>\n): FileDiffRenderData<LAnnotation>;\nexport function getCodeViewItemRenderData<LAnnotation, Caret>(\n  renderedItem: CodeViewRenderedFileItem<LAnnotation, Caret>\n): FileRenderData<LAnnotation>;\nexport function getCodeViewItemRenderData<LAnnotation, Caret>(\n  renderedItem: CodeViewRenderedItem<LAnnotation, Caret>\n): FileDiffRenderData<LAnnotation> | FileRenderData<LAnnotation>;\nexport function getCodeViewItemRenderData<LAnnotation, Caret>(\n  renderedItem: CodeViewRenderedItem<LAnnotation, Caret>\n): FileDiffRenderData<LAnnotation> | FileRenderData<LAnnotation> {\n  if (renderedItem.type === 'diff') {\n    const { instance, item } = renderedItem;\n    return instance.__getNextRenderData({\n      fileDiff: instance.fileDiff ?? item.fileDiff,\n      lineAnnotations: undefined,\n    });\n  }\n  const { instance, item } = renderedItem;\n  return instance.__getNextRenderData({\n    file: instance.file ?? item.file,\n    lineAnnotations: undefined,\n  });\n}\n"],"mappings":";AAoBA,SAAgB,0BACd,cAC+D;CAC/D,IAAI,aAAa,SAAS,QAAQ;EAChC,MAAM,EAAE,UAAU,SAAS;EAC3B,OAAO,SAAS,oBAAoB;GAClC,UAAU,SAAS,YAAY,KAAK;GACpC,iBAAiB,KAAA;EACnB,CAAC;CACH;CACA,MAAM,EAAE,UAAU,SAAS;CAC3B,OAAO,SAAS,oBAAoB;EAClC,MAAM,SAAS,QAAQ,KAAK;EAC5B,iBAAiB,KAAA;CACnB,CAAC;AACH"}

package/dist/utils/getHighlighterOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getHighlighterOptions.d.ts","names":[],"sources":["../../src/utils/getHighlighterOptions.ts"],"mappings":";;UAQU;EACR,QAAQ,kBAAkB;EAC1B,uBAAuB;;UAGf;EACR,OAAO;EACP,QAAQ;EACR,sBAAsB;;iBAGR,sBACd,MAAM,qBAAqB,oCACzB,OAAO,wBAAqC,0BAC7C"}
+{"version":3,"file":"getHighlighterOptions.d.ts","names":[],"sources":["../../src/utils/getHighlighterOptions.ts"],"mappings":";;UASU;EACR,QAAQ,kBAAkB;EAC1B,uBAAuB;;UAGf;EACR,OAAO;EACP,QAAQ;EACR,sBAAsB;;iBAGR,sBACd,MAAM,qBAAqB,oCACzB,OAAO,wBAAwB,0BAChC"}

package/dist/utils/getHighlighterOptions.js

@@ -1,10 +1,11 @@
+import { resolveHighlighterType } from "../highlighter/highlighterType.js";
 import { getThemes } from "./getThemes.js";
 //#region src/utils/getHighlighterOptions.ts
-function getHighlighterOptions(lang, { theme, preferredHighlighter = "shiki-js" }) {
+function getHighlighterOptions(lang, { theme, preferredHighlighter }) {
 	return {
 		langs: Array.isArray(lang) ? lang : [lang ?? "text"],
 		themes: getThemes(theme),
-		preferredHighlighter
+		preferredHighlighter: resolveHighlighterType(preferredHighlighter)
 	};
 }
 //#endregion

package/dist/utils/getHighlighterOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"getHighlighterOptions.js","names":[],"sources":["../../src/utils/getHighlighterOptions.ts"],"sourcesContent":["import type {\n  DiffsThemeNames,\n  HighlighterTypes,\n  SupportedLanguages,\n  ThemesType,\n} from '../types';\nimport { getThemes } from './getThemes';\n\ninterface HighlighterOptionsShape {\n  theme?: DiffsThemeNames | ThemesType;\n  preferredHighlighter?: HighlighterTypes;\n}\n\ninterface GetHighlighterOptionsReturn {\n  langs: SupportedLanguages[];\n  themes: DiffsThemeNames[];\n  preferredHighlighter: HighlighterTypes;\n}\n\nexport function getHighlighterOptions(\n  lang: SupportedLanguages | SupportedLanguages[] | undefined,\n  { theme, preferredHighlighter = 'shiki-js' }: HighlighterOptionsShape\n): GetHighlighterOptionsReturn {\n  return {\n    langs: Array.isArray(lang) ? lang : [lang ?? 'text'],\n    themes: getThemes(theme),\n    preferredHighlighter,\n  };\n}\n"],"mappings":";;AAmBA,SAAgB,sBACd,MACA,EAAE,OAAO,uBAAuB,cACH;CAC7B,OAAO;EACL,OAAO,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,QAAQ,MAAM;EACnD,QAAQ,UAAU,KAAK;EACvB;CACF;AACF"}
+{"version":3,"file":"getHighlighterOptions.js","names":[],"sources":["../../src/utils/getHighlighterOptions.ts"],"sourcesContent":["import { resolveHighlighterType } from '../highlighter/highlighterType';\nimport type {\n  DiffsThemeNames,\n  HighlighterTypes,\n  SupportedLanguages,\n  ThemesType,\n} from '../types';\nimport { getThemes } from './getThemes';\n\ninterface HighlighterOptionsShape {\n  theme?: DiffsThemeNames | ThemesType;\n  preferredHighlighter?: HighlighterTypes;\n}\n\ninterface GetHighlighterOptionsReturn {\n  langs: SupportedLanguages[];\n  themes: DiffsThemeNames[];\n  preferredHighlighter: HighlighterTypes;\n}\n\nexport function getHighlighterOptions(\n  lang: SupportedLanguages | SupportedLanguages[] | undefined,\n  { theme, preferredHighlighter }: HighlighterOptionsShape\n): GetHighlighterOptionsReturn {\n  return {\n    langs: Array.isArray(lang) ? lang : [lang ?? 'text'],\n    themes: getThemes(theme),\n    preferredHighlighter: resolveHighlighterType(preferredHighlighter),\n  };\n}\n"],"mappings":";;;AAoBA,SAAgB,sBACd,MACA,EAAE,OAAO,wBACoB;CAC7B,OAAO;EACL,OAAO,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,QAAQ,MAAM;EACnD,QAAQ,UAAU,KAAK;EACvB,sBAAsB,uBAAuB,oBAAoB;CACnE;AACF"}

package/dist/utils/getHighlighterThemeStyles.d.ts

@@ -1,4 +1,5 @@
-import { DiffsHighlighter, DiffsThemeNames, ThemesType } from "../types.js";
+import { DiffsHighlighter } from "../highlighter/DiffsHighlighter.js";
+import { DiffsThemeNames, ThemesType } from "../types.js";
 //#region src/utils/getHighlighterThemeStyles.d.ts
 interface GetHighlighterThemeStylesProps {
   theme?: DiffsThemeNames | ThemesType;

package/dist/utils/getHighlighterThemeStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getHighlighterThemeStyles.d.ts","names":[],"sources":["../../src/utils/getHighlighterThemeStyles.ts"],"mappings":";;UAWU;EACR,QAAQ,kBAAkB;EAC1B,aAAa;EACb;;iBAac,4BACd,OACA,aACA,UACC"}
+{"version":3,"file":"getHighlighterThemeStyles.d.ts","names":[],"sources":["../../src/utils/getHighlighterThemeStyles.ts"],"mappings":";;;UAWU;EACR,QAAQ,kBAAkB;EAC1B,aAAa;EACb;;iBAGc,4BACd,OACA,aACA,UACC"}