@atlaskit/editor-plugin-show-diff 12.1.2 → 12.1.4

package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js

@@ -0,0 +1,678 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildAddedCellOverlayRoundedStyle = buildAddedCellOverlayRoundedStyle;
+exports.buildAddedCellOverlayStyle = buildAddedCellOverlayStyle;
+exports.buildAddedCellOverlayStyleNew = buildAddedCellOverlayStyleNew;
+exports.buildDecorationMarkerVariable = buildDecorationMarkerVariable;
+exports.buildDecorationMarkerVariableActive = buildDecorationMarkerVariableActive;
+exports.buildDecorationMarkerVariableNew = buildDecorationMarkerVariableNew;
+exports.buildDeletedBlockOutline = buildDeletedBlockOutline;
+exports.buildDeletedBlockOutlineActive = buildDeletedBlockOutlineActive;
+exports.buildDeletedBlockOutlineNew = buildDeletedBlockOutlineNew;
+exports.buildDeletedBlockOutlineRounded = buildDeletedBlockOutlineRounded;
+exports.buildDeletedBlockOutlineRoundedActive = buildDeletedBlockOutlineRoundedActive;
+exports.buildDeletedBlockOutlineRoundedNew = buildDeletedBlockOutlineRoundedNew;
+exports.buildDeletedCellOverlayRoundedStyle = buildDeletedCellOverlayRoundedStyle;
+exports.buildDeletedCellOverlayStyle = buildDeletedCellOverlayStyle;
+exports.buildDeletedContentStyleUnbounded = buildDeletedContentStyleUnbounded;
+exports.buildDeletedContentStyleUnboundedActive = buildDeletedContentStyleUnboundedActive;
+exports.buildDeletedDecorationMarkerVariable = buildDeletedDecorationMarkerVariable;
+exports.buildDeletedDecorationMarkerVariableActive = buildDeletedDecorationMarkerVariableActive;
+exports.buildDeletedDecorationMarkerVariableNew = buildDeletedDecorationMarkerVariableNew;
+exports.buildDeletedDecorationMarkerVariableSimple = buildDeletedDecorationMarkerVariableSimple;
+exports.buildDeletedInlineContentStyleExtended = buildDeletedInlineContentStyleExtended;
+exports.buildDeletedInlineStyle = buildDeletedInlineStyle;
+exports.buildDeletedInlineStyleStandard = buildDeletedInlineStyleStandard;
+exports.buildDeletedInlineStyleUnbounded = buildDeletedInlineStyleUnbounded;
+exports.buildDeletedRowStyle = buildDeletedRowStyle;
+exports.buildDeletedStyleQuoteNode = buildDeletedStyleQuoteNode;
+exports.buildDeletedStyleQuoteNodeActive = buildDeletedStyleQuoteNodeActive;
+exports.buildDeletedStyleQuoteNodeWithLozenge = buildDeletedStyleQuoteNodeWithLozenge;
+exports.buildDeletedStyleQuoteNodeWithLozengeActive = buildDeletedStyleQuoteNodeWithLozengeActive;
+exports.buildInsertStyle = buildInsertStyle;
+exports.buildInsertStyleActive = buildInsertStyleActive;
+exports.buildInsertStyleCardBlockNode = buildInsertStyleCardBlockNode;
+exports.buildInsertStyleCardBlockNodeActive = buildInsertStyleCardBlockNodeActive;
+exports.buildInsertStyleCardBlockNodeNew = buildInsertStyleCardBlockNodeNew;
+exports.buildInsertStyleExtended = buildInsertStyleExtended;
+exports.buildInsertStyleExtendedActive = buildInsertStyleExtendedActive;
+exports.buildInsertStyleExtendedNoUnderline = buildInsertStyleExtendedNoUnderline;
+exports.buildInsertStyleExtendedNoUnderlineActive = buildInsertStyleExtendedNoUnderlineActive;
+exports.buildInsertStyleInBlock = buildInsertStyleInBlock;
+exports.buildInsertStyleInBlockExtended = buildInsertStyleInBlockExtended;
+exports.buildInsertStyleInBlockExtendedNoUnderline = buildInsertStyleInBlockExtendedNoUnderline;
+exports.buildInsertStyleNode = buildInsertStyleNode;
+exports.buildInsertStyleNodeActive = buildInsertStyleNodeActive;
+exports.buildInsertStyleNodeNew = buildInsertStyleNodeNew;
+exports.buildInsertStyleQuoteNode = buildInsertStyleQuoteNode;
+exports.buildInsertStyleQuoteNodeActive = buildInsertStyleQuoteNodeActive;
+exports.buildInsertStyleQuoteNodeNew = buildInsertStyleQuoteNodeNew;
+exports.buildInsertStyleRuleNode = buildInsertStyleRuleNode;
+exports.buildInsertStyleRuleNodeActive = buildInsertStyleRuleNodeActive;
+exports.buildInsertStyleRuleNodeNew = buildInsertStyleRuleNodeNew;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// token() is a build-time transform needing static literals, so pre-compute every colour's
+// tokens here and index by name at runtime.
+
+var bgSubtlestMap = {
+  green: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  teal: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+  blue: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
+  purple: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+  red: "var(--ds-background-accent-red-subtlest, #FFECEB)",
+  orange: "var(--ds-background-accent-orange-subtlest, #FFF5DB)",
+  yellow: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
+  magenta: "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
+  gray: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
+};
+var bgSubtlestPressedMap = {
+  green: "var(--ds-background-accent-green-subtlest-pressed, #97EDC9)",
+  teal: "var(--ds-background-accent-teal-subtlest-pressed, #B1E4F7)",
+  blue: "var(--ds-background-accent-blue-subtlest-pressed, #ADCBFB)",
+  purple: "var(--ds-background-accent-purple-subtlest-pressed, #E3BDFA)",
+  red: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)",
+  orange: "var(--ds-background-accent-orange-subtlest-pressed, #FBD779)",
+  yellow: "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)",
+  magenta: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)",
+  gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
+};
+var bgSubtlerPressedMap = {
+  green: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
+  teal: "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)",
+  blue: "var(--ds-background-accent-blue-subtler-pressed, #8FB8F6)",
+  purple: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
+  red: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  orange: "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
+  yellow: "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
+  magenta: "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
+  gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)"
+};
+var borderAccentMap = {
+  green: "var(--ds-border-accent-green, #22A06B)",
+  teal: "var(--ds-border-accent-teal, #2898BD)",
+  blue: "var(--ds-border-accent-blue, #357DE8)",
+  purple: "var(--ds-border-accent-purple, #AF59E1)",
+  red: "var(--ds-border-accent-red, #E2483D)",
+  orange: "var(--ds-border-accent-orange, #E06C00)",
+  yellow: "var(--ds-border-accent-yellow, #B38600)",
+  magenta: "var(--ds-border-accent-magenta, #CD519D)",
+  gray: "var(--ds-border-accent-gray, #7D818A)"
+};
+var textAccentMap = {
+  green: "var(--ds-text-accent-green, #216E4E)",
+  teal: "var(--ds-text-accent-teal, #206A83)",
+  blue: "var(--ds-text-accent-blue, #1558BC)",
+  purple: "var(--ds-text-accent-purple, #803FA5)",
+  red: "var(--ds-text-accent-red, #AE2E24)",
+  orange: "var(--ds-text-accent-orange, #9E4C00)",
+  yellow: "var(--ds-text-accent-yellow, #7F5F01)",
+  magenta: "var(--ds-text-accent-magenta, #943D73)",
+  gray: "var(--ds-text-accent-gray, #505258)"
+};
+function bgSubtlest(color) {
+  return bgSubtlestMap[color];
+}
+function bgSubtlestPressed(color) {
+  return bgSubtlestPressedMap[color];
+}
+function bgSubtlerPressed(color) {
+  return bgSubtlerPressedMap[color];
+}
+function borderAccent(color) {
+  return borderAccentMap[color];
+}
+function textAccent(color) {
+  return textAccentMap[color];
+}
+
+/** Outline colour for deleted table-cell overlays. */
+function deletedCellOutline(colors) {
+  return colors.deletedCellBorderProminence === 'subtle' ? "var(--ds-border-disabled, #0515240F)" : borderAccent(colors.deletedCellColor);
+}
+
+/** Ring colour for an active (scroll-target) deleted block outline. */
+function deletedBlockOutlineActiveRing(colors) {
+  return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);
+}
+
+// --- Inserted content styles ---
+
+/** Inline inserted content — default state. */
+function buildInsertStyle(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    background: bgSubtlest(colors.insertColor),
+    textDecoration: 'underline',
+    textDecorationStyle: colors.insertUnderlineStyle,
+    textDecorationThickness: "var(--ds-space-025, 2px)",
+    textDecorationColor: borderAccent(colors.insertColor)
+  });
+}
+
+/** Inline insert style for content within a block node (no background, underline only). */
+function buildInsertStyleInBlock(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    textDecoration: 'underline',
+    textDecorationStyle: colors.insertUnderlineStyle,
+    textDecorationThickness: "var(--ds-space-025, 2px)",
+    textDecorationColor: borderAccent(colors.insertColor)
+  });
+}
+
+/** Extended insert style — background + border-bottom underline. */
+function buildInsertStyleExtended(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    background: bgSubtlest(colors.insertColor),
+    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    padding: "1px 0 2px"
+  });
+}
+
+/** Extended insert style for content within a block node (border-bottom only, no background). */
+function buildInsertStyleInBlockExtended(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    padding: "1px 0 2px"
+  });
+}
+
+/** Active state of the extended insert style. */
+function buildInsertStyleExtendedActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    background: bgSubtlerPressed(colors.insertActiveColor),
+    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    padding: "1px 0 2px"
+  });
+}
+
+/** Extended insert style without underline — background + padding only. */
+function buildInsertStyleExtendedNoUnderline(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    background: bgSubtlest(colors.insertColor),
+    padding: "1px 0 2px"
+  });
+}
+
+/** Active state of the no-underline extended insert style. */
+function buildInsertStyleExtendedNoUnderlineActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    background: bgSubtlerPressed(colors.insertActiveColor),
+    padding: "1px 0 2px"
+  });
+}
+
+/** No-underline extended insert style for block content (padding only). */
+function buildInsertStyleInBlockExtendedNoUnderline(_colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    padding: "1px 0 2px"
+  });
+}
+
+/** Inline inserted content — active/focused state. */
+function buildInsertStyleActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    background: bgSubtlerPressed(colors.insertActiveColor),
+    textDecoration: 'underline',
+    textDecorationStyle: colors.insertUnderlineStyle,
+    textDecorationThickness: "var(--ds-space-025, 2px)",
+    textDecorationColor: textAccent(colors.insertActiveColor)
+  });
+}
+
+// --- Deleted inline content styles ---
+
+function deletedInlineStyleBase(colors) {
+  return {
+    textDecorationColor: borderAccent(colors.deleteColor),
+    textDecoration: 'line-through',
+    position: 'relative',
+    opacity: 1
+  };
+}
+function deletedInlineStyleActiveBase(colors) {
+  return _objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
+    textDecorationThickness: '2px',
+    backgroundColor: bgSubtlestPressed(colors.deleteActiveColor)
+  });
+}
+
+/** Strikethrough for removed inline / widget content (non-marker decorations). */
+function buildDeletedInlineStyle(colors, isActive) {
+  return isActive ? (0, _lazyNodeView.convertToInlineCss)(deletedInlineStyleActiveBase(colors)) : (0, _lazyNodeView.convertToInlineCss)(deletedInlineStyleBase(colors));
+}
+
+/** Strikethrough line (unbounded span) for deleted content — default state. */
+function buildDeletedContentStyleUnbounded(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: "1px solid ".concat(borderAccent(colors.deleteColor)),
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+}
+
+/** Strikethrough line (unbounded span) for deleted content — active state. */
+function buildDeletedContentStyleUnboundedActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: "2px solid ".concat(borderAccent(colors.deleteColor)),
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+}
+
+// --- Deleted block node styles — quote node ---
+
+/** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
+function buildDeletedInlineStyleUnbounded(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: "1px solid ".concat(textAccent(colors.deleteColor)),
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+}
+
+/** Deleted lozenge-style quote node with box-shadow ring. */
+function buildDeletedStyleQuoteNodeWithLozenge(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: "0 0 0 1px ".concat(borderAccent(colors.deleteColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Active state of the deleted lozenge-style quote node — stronger ring. */
+function buildDeletedStyleQuoteNodeWithLozengeActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: "0 0 0 4px ".concat(borderAccent(colors.deleteActiveColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Deleted quote node — a 2px left border, or a 1px ring with padding, per `deletedQuoteNodeShape`. */
+function buildDeletedStyleQuoteNode(colors) {
+  if (colors.deletedQuoteNodeShape === 'borderLeft') {
+    return (0, _lazyNodeView.convertToInlineCss)({
+      borderLeft: "2px solid ".concat(borderAccent(colors.deleteColor))
+    });
+  }
+  return (0, _lazyNodeView.convertToInlineCss)({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: "0 0 0 1px ".concat(borderAccent(colors.deleteColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Quote node outline for deleted content — active state. */
+function buildDeletedStyleQuoteNodeActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    marginTop: "var(--ds-space-150, 12px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    boxShadow: "0 0 0 4px ".concat(bgSubtlerPressed(colors.deleteActiveColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+// --- Deleted block node styles — generic block outline ---
+
+/** Generic block node outline for deleted content — default state (small radius). */
+function buildDeletedBlockOutline(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 1px ".concat(borderAccent(colors.deleteColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic block node outline for deleted content — active state (small radius). */
+function buildDeletedBlockOutlineActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(deletedBlockOutlineActiveRing(colors)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic block node outline for deleted content — default state (rounded/xsmall+1px radius). */
+function buildDeletedBlockOutlineRounded(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 1px ".concat(borderAccent(colors.deleteColor)),
+    borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+  });
+}
+
+/** Generic block node outline for deleted content — active state (rounded/xsmall+1px radius). */
+function buildDeletedBlockOutlineRoundedActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(deletedBlockOutlineActiveRing(colors)),
+    borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+  });
+}
+
+/** Scroll-navigation "new" emphasis: 4px ring — default state (small radius). */
+function buildDeletedBlockOutlineNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.deleteColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Scroll-navigation "new" emphasis: 4px ring — default state (rounded radius). */
+function buildDeletedBlockOutlineRoundedNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.deleteColor)),
+    borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+  });
+}
+
+// --- Deleted table row style ---
+
+/** Table row style for deleted rows. See `deletedRowTreatment`. */
+function buildDeletedRowStyle(colors) {
+  var base = {
+    textDecoration: 'line-through',
+    opacity: 0.6,
+    display: 'table-row'
+  };
+  return colors.deletedRowTreatment === 'textTint' ? (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, base), {}, {
+    color: textAccent(colors.deleteColor)
+  })) : (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, base), {}, {
+    textDecorationColor: borderAccent(colors.deleteColor)
+  }));
+}
+
+// --- Inserted block node styles — quote, rule, generic node, card ---
+
+/** Quote node (blockquote) left-border style for inserted content — default state. */
+function buildInsertStyleQuoteNode(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    borderLeft: "2px solid ".concat(borderAccent(colors.insertColor))
+  });
+}
+
+/** Quote node left-border style for inserted content — "new" scroll-nav state. */
+function buildInsertStyleQuoteNodeNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    borderLeft: "4px solid ".concat(bgSubtlest(colors.insertColor))
+  });
+}
+
+/** Quote node left-border style for inserted content — active state. */
+function buildInsertStyleQuoteNodeActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    borderLeft: "4px solid ".concat(bgSubtlerPressed(colors.insertActiveColor))
+  });
+}
+
+/** Horizontal rule style for inserted content — default state. */
+function buildInsertStyleRuleNode(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    backgroundColor: borderAccent(colors.insertColor)
+  });
+}
+
+/** Horizontal rule style for inserted content — "new" scroll-nav state. */
+function buildInsertStyleRuleNodeNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    backgroundColor: bgSubtlest(colors.insertColor),
+    border: 'none',
+    height: '4px',
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Horizontal rule style for inserted content — active state. */
+function buildInsertStyleRuleNodeActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    backgroundColor: bgSubtlerPressed(colors.insertActiveColor),
+    border: 'none',
+    height: '4px',
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic node outline for inserted content — default state (small radius). */
+function buildInsertStyleNode(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 1px ".concat(borderAccent(colors.insertColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic node outline for inserted content — "new" scroll-nav state (small radius). */
+function buildInsertStyleNodeNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.insertColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Generic node outline for inserted content — active state (small radius). */
+function buildInsertStyleNodeActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(bgSubtlerPressed(colors.insertActiveColor)),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  });
+}
+
+/** Card block node outline for inserted content — default state (medium radius). */
+function buildInsertStyleCardBlockNode(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 1px ".concat(borderAccent(colors.insertColor)),
+    borderRadius: "var(--ds-radius-medium, 6px)"
+  });
+}
+
+/** Card block node outline for inserted content — "new" scroll-nav state (medium radius). */
+function buildInsertStyleCardBlockNodeNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.insertColor)),
+    borderRadius: "var(--ds-radius-medium, 6px)"
+  });
+}
+
+/** Card block node outline for inserted content — active state (medium radius). */
+function buildInsertStyleCardBlockNodeActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    boxShadow: "0 0 0 4px ".concat(bgSubtlerPressed(colors.insertActiveColor)),
+    borderRadius: "var(--ds-radius-medium, 6px)"
+  });
+}
+
+// --- CSS custom properties ---
+// Applied inline on the decoration wrapper; cascade down to child/pseudo-element selectors in the
+// global stylesheet.
+
+/** CSS variables for an inserted node decoration marker — default state. */
+function buildDecorationMarkerVariable(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    '--diff-decoration-marker-color': borderAccent(colors.insertColor),
+    '--diff-decoration-marker-ring-width': '1px'
+  });
+}
+
+/** CSS variables for an inserted node decoration marker — "new" scroll-nav state. */
+function buildDecorationMarkerVariableNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    '--diff-decoration-marker-color': bgSubtlest(colors.insertColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  });
+}
+
+/** CSS variables for an inserted node decoration marker — active state. */
+function buildDecorationMarkerVariableActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    '--diff-decoration-marker-color': bgSubtlerPressed(colors.insertActiveColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  });
+}
+
+/** Deleted node decoration marker (extension / embedCard / listItem) — default state. */
+function buildDeletedDecorationMarkerVariable(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
+    '--diff-decoration-marker-color': borderAccent(colors.deleteColor),
+    '--diff-decoration-marker-ring-width': '1px'
+  }));
+}
+
+/** Opacity only, no position or strikethrough. Used by the standard scheme. */
+function buildDeletedDecorationMarkerVariableSimple(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    opacity: 0.8,
+    '--diff-decoration-marker-color': borderAccent(colors.deleteColor),
+    '--diff-decoration-marker-ring-width': '1px'
+  });
+}
+
+/** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
+function buildDeletedInlineContentStyleExtended(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    backgroundColor: bgSubtlest(colors.deleteColor),
+    borderBottom: "2px solid ".concat(borderAccent(colors.deleteColor)),
+    padding: "1px 0 2px"
+  });
+}
+
+/** Standard deleted inline style — colours the glyph itself, not just the strikethrough. */
+function buildDeletedInlineStyleStandard(colors, state) {
+  if (state === 'active') {
+    return (0, _lazyNodeView.convertToInlineCss)({
+      color: "var(--ds-text, #292A2E)",
+      textDecoration: 'line-through',
+      textDecorationColor: textAccent(colors.deleteColor),
+      position: 'relative',
+      opacity: 1
+    });
+  }
+  return (0, _lazyNodeView.convertToInlineCss)({
+    color: textAccent(colors.deleteColor),
+    textDecoration: 'line-through',
+    position: 'relative',
+    opacity: state === 'new' ? 0.83 : 0.6
+  });
+}
+
+/** Deleted node decoration marker — "new" state. */
+function buildDeletedDecorationMarkerVariableNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
+    '--diff-decoration-marker-color': bgSubtlest(colors.deleteColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  }));
+}
+
+/** Deleted node decoration marker — active state. */
+function buildDeletedDecorationMarkerVariableActive(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleActiveBase(colors)), {}, {
+    '--diff-decoration-marker-color': bgSubtlerPressed(colors.deleteActiveColor),
+    '--diff-decoration-marker-ring-width': '4px'
+  }));
+}
+
+// --- Table cell overlay styles ---
+
+/** Cell overlay for added table cells — default state. Stacking order varies by scheme. */
+function buildAddedCellOverlayStyle(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.insertColor), " r g b / ").concat(colors.insertedCellOpacity, ")"),
+    zIndex: colors.addedCellOverlayZIndex,
+    outline: "1px solid ".concat(borderAccent(colors.insertColor)),
+    pointerEvents: 'none'
+  });
+}
+
+/** Added cell overlay — rounded variant. See `roundedAddedCellOverlayInheritsBorder`. */
+function buildAddedCellOverlayRoundedStyle(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.insertColor), " r g b / ").concat(colors.insertedCellOpacity, ")"),
+    zIndex: 2,
+    outline: "1px solid ".concat(borderAccent(colors.insertColor)),
+    pointerEvents: 'none'
+  }, colors.roundedAddedCellOverlayInheritsBorder ? {
+    border: 'inherit'
+  } : {}), {}, {
+    borderRadius: 'inherit'
+  }));
+}
+
+/** Cell overlay for added table cells — "new" scroll-nav state. */
+function buildAddedCellOverlayStyleNew(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.insertColor), " r g b / ").concat(colors.insertedCellOpacity, ")"),
+    zIndex: 1,
+    outline: "1px solid ".concat(bgSubtlerPressed(colors.insertActiveColor)),
+    pointerEvents: 'none'
+  });
+}
+
+/** Cell overlay for deleted table cells — default state (zIndex 1). Uses deletedCellColor. */
+function buildDeletedCellOverlayStyle(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.deletedCellColor), " r g b / 0.5)"),
+    zIndex: 1,
+    outline: "1px solid ".concat(deletedCellOutline(colors)),
+    pointerEvents: 'none'
+  });
+}
+
+/** Cell overlay for deleted table cells — rounded variant (zIndex 2, inherits border/radius). */
+function buildDeletedCellOverlayRoundedStyle(colors) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.deletedCellColor), " r g b / 0.5)"),
+    zIndex: 2,
+    outline: "1px solid ".concat(deletedCellOutline(colors)),
+    pointerEvents: 'none',
+    border: 'inherit',
+    borderRadius: 'inherit'
+  });
+}