markstream-svelte 0.0.4-beta.2 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +40 -1
  2. package/dist/components/CodeBlockNode.svelte +195 -19
  3. package/dist/components/CodeBlockNode.svelte.d.ts +1 -0
  4. package/dist/components/PreCodeNode.svelte +57 -2
  5. package/dist/components/PreCodeNode.svelte.d.ts +4 -0
  6. package/dist/components/shared/node-helpers.d.ts +1 -0
  7. package/dist/index.css +175 -28
  8. package/dist/index.px.css +175 -28
  9. package/dist/index.tailwind.css +175 -28
  10. package/dist/optional/monaco.js +25 -11
  11. package/package.json +7 -3
package/dist/index.css CHANGED
@@ -36,7 +36,12 @@ markstream-svelte {
36
36
  --ms-border: var(--border);
37
37
  --ms-popover: var(--background);
38
38
  --ms-popover-foreground: var(--foreground);
39
- --code-fg: hsl(var(--ms-foreground));
39
+ /* Unified default code surface; explicit editor themes may override it. */
40
+ --code-fg: hsl(0 0% 10%);
41
+ --code-bg: #fff;
42
+ --code-border: hsl(var(--ms-border));
43
+ --code-header-bg: hsl(var(--ms-secondary));
44
+ --code-line-number: hsl(var(--ms-muted-foreground));
40
45
  --code-action-fg: hsl(var(--ms-muted-foreground));
41
46
  --code-action-hover-bg: hsl(var(--ms-accent));
42
47
  --code-action-hover-fg: hsl(var(--ms-accent-foreground));
@@ -48,6 +53,9 @@ markstream-svelte {
48
53
  --modal-bg: hsl(var(--ms-popover));
49
54
  --modal-fg: hsl(var(--ms-popover-foreground));
50
55
  --ms-text-label: 0.75rem;
56
+ --ms-radius: 0.5rem;
57
+ --ms-gap-header: 1rem;
58
+ --ms-gap-header-main: 0.625rem;
51
59
  --ms-action-btn-padding: 0.375rem;
52
60
  --ms-action-btn-icon: 0.875rem;
53
61
  --ms-inset-panel-x: 0.625rem;
@@ -89,6 +97,9 @@ markstream-svelte {
89
97
  --muted: 217.2 32.6% 17.5%;
90
98
  --muted-foreground: 215 20.2% 65.1%;
91
99
  --ms-accent: 217.2 32.6% 24%;
100
+ --code-fg: hsl(0 0% 93%);
101
+ --code-bg: #111827;
102
+ --code-header-bg: hsl(var(--ms-muted));
92
103
  }
93
104
 
94
105
  .markstream-svelte > :first-child {
@@ -343,8 +354,8 @@ markstream-svelte {
343
354
  overflow: auto;
344
355
  padding: 1rem 1.1rem;
345
356
  border-radius: 1rem;
346
- background: #0f172a;
347
- color: #e2e8f0;
357
+ background: var(--code-bg);
358
+ color: var(--code-fg);
348
359
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
349
360
  }
350
361
 
@@ -1465,8 +1476,9 @@ body > div[id^="dmermaid-"] {
1465
1476
  }
1466
1477
 
1467
1478
  .markstream-svelte .code-block-container {
1468
- --markstream-code-fallback-bg: #ffffff;
1469
- --markstream-code-fallback-fg: #111827;
1479
+ --markstream-code-fallback-bg: var(--code-bg);
1480
+ --markstream-code-fallback-fg: var(--code-fg);
1481
+ --markstream-code-border-color: var(--code-border);
1470
1482
  --markstream-diff-shell-fg: #0f172a;
1471
1483
  --markstream-diff-shell-muted: #64748b;
1472
1484
  --markstream-diff-shell-border: rgba(148, 163, 184, 0.24);
@@ -1498,14 +1510,15 @@ body > div[id^="dmermaid-"] {
1498
1510
  overflow: hidden;
1499
1511
  border: 1px solid rgba(148, 163, 184, 0.24);
1500
1512
  border-radius: 0.75rem;
1501
- background: #ffffff;
1513
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1514
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1502
1515
  box-shadow: 0 18px 38px -28px rgba(15, 23, 42, 0.45);
1503
1516
  }
1504
1517
 
1505
1518
  .markstream-svelte .code-block-container.is-dark,
1506
1519
  .dark .markstream-svelte .code-block-container {
1507
1520
  --markstream-code-fallback-bg: #111827;
1508
- --markstream-code-fallback-fg: #e5e7eb;
1521
+ --markstream-code-fallback-fg: hsl(0 0% 93%);
1509
1522
  --markstream-diff-shell-fg: #e2e8f0;
1510
1523
  --markstream-diff-shell-muted: #94a3b8;
1511
1524
  --markstream-diff-shell-border: rgba(82, 82, 91, 0.56);
@@ -1518,7 +1531,8 @@ body > div[id^="dmermaid-"] {
1518
1531
  --markstream-diff-unchanged-divider: rgba(255, 255, 255, 0.18);
1519
1532
  --markstream-diff-action-hover: rgba(255, 255, 255, 0.08);
1520
1533
  border-color: rgba(71, 85, 105, 0.55);
1521
- background: #0f172a;
1534
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1535
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1522
1536
  box-shadow: 0 22px 44px -30px rgba(2, 6, 23, 0.95);
1523
1537
  }
1524
1538
 
@@ -1542,27 +1556,31 @@ body > div[id^="dmermaid-"] {
1542
1556
  display: flex;
1543
1557
  align-items: center;
1544
1558
  justify-content: space-between;
1545
- gap: 0.75rem;
1546
- padding: 0.625rem 1rem;
1547
- border-bottom: 1px solid rgba(148, 163, 184, 0.1);
1559
+ gap: var(--ms-gap-header);
1560
+ padding: var(--ms-inset-panel-y) var(--ms-inset-panel-x);
1561
+ border-bottom: 1px solid var(--code-border);
1562
+ background: var(--code-header-bg);
1563
+ color: var(--code-fg);
1564
+ border-radius: var(--ms-radius) var(--ms-radius) 0 0;
1548
1565
  }
1549
1566
 
1550
1567
  .markstream-svelte .code-block-header__meta {
1551
1568
  display: flex;
1552
1569
  flex: 1 1 auto;
1553
1570
  align-items: center;
1554
- gap: 0.5rem;
1571
+ gap: var(--ms-gap-header-main);
1555
1572
  min-width: 0;
1556
1573
  }
1557
1574
 
1558
1575
  .markstream-svelte .code-block-header__label {
1559
1576
  min-width: 0;
1560
1577
  overflow: hidden;
1561
- color: inherit;
1578
+ color: var(--code-action-fg);
1562
1579
  text-overflow: ellipsis;
1563
1580
  white-space: nowrap;
1564
- font:
1565
- 500 0.95rem/1.2 "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
1581
+ font-size: var(--ms-text-label);
1582
+ font-weight: 500;
1583
+ line-height: 1.2;
1566
1584
  }
1567
1585
 
1568
1586
  .markstream-svelte .code-block-header__actions {
@@ -1570,7 +1588,7 @@ body > div[id^="dmermaid-"] {
1570
1588
  flex: 0 0 auto;
1571
1589
  align-items: center;
1572
1590
  justify-content: flex-end;
1573
- gap: 0.25rem;
1591
+ gap: var(--ms-gap-header-actions);
1574
1592
  margin-left: auto;
1575
1593
  }
1576
1594
 
@@ -1604,14 +1622,24 @@ body > div[id^="dmermaid-"] {
1604
1622
  min-height: 96px;
1605
1623
  min-width: 0;
1606
1624
  overflow: hidden;
1607
- background: var(--vscode-editor-background, var(--markstream-code-fallback-bg));
1625
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1608
1626
  }
1609
1627
 
1610
1628
  .markstream-svelte .code-block-body > .code-editor-container,
1611
- .markstream-svelte .code-block-body > .code-pre-fallback {
1629
+ .markstream-svelte .code-block-body > .code-editor-fallback-surface {
1612
1630
  grid-area: 1 / 1;
1613
1631
  }
1614
1632
 
1633
+ .markstream-svelte .code-editor-fallback-surface {
1634
+ min-width: 0;
1635
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1636
+ }
1637
+
1638
+ .markstream-svelte .code-editor-fallback-surface.is-hidden {
1639
+ visibility: hidden;
1640
+ pointer-events: none;
1641
+ }
1642
+
1615
1643
  .code-block-body--expanded {
1616
1644
  max-height: none;
1617
1645
  }
@@ -1626,16 +1654,15 @@ body > div[id^="dmermaid-"] {
1626
1654
  display: inline-flex;
1627
1655
  align-items: center;
1628
1656
  justify-content: center;
1629
- width: 1.75rem;
1630
- height: 1.75rem;
1631
- padding: 0;
1657
+ padding: var(--ms-action-btn-padding);
1632
1658
  border-radius: 0.375rem;
1633
- color: inherit;
1659
+ color: var(--code-action-fg);
1634
1660
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, opacity 140ms ease;
1635
1661
  }
1636
1662
 
1637
1663
  .markstream-svelte .code-action-btn:hover {
1638
- background: var(--vscode-editor-selectionBackground, rgba(148, 163, 184, 0.18));
1664
+ background: var(--code-action-hover-bg);
1665
+ color: var(--code-action-hover-fg);
1639
1666
  }
1640
1667
 
1641
1668
  .markstream-svelte .code-action-btn__icon,
@@ -1669,17 +1696,25 @@ body > div[id^="dmermaid-"] {
1669
1696
  }
1670
1697
 
1671
1698
  .markstream-svelte .code-pre-fallback {
1699
+ box-sizing: border-box;
1700
+ width: 100%;
1672
1701
  margin: 0;
1673
- padding: 1rem;
1702
+ padding: var(--markstream-code-padding-y, 8px) var(--markstream-code-padding-x, 12px);
1703
+ padding-left: var(--markstream-code-padding-left, 52px);
1674
1704
  max-height: 500px;
1675
1705
  overflow: auto;
1676
1706
  border: 0;
1677
1707
  border-radius: 0;
1678
- background: var(--vscode-editor-background, var(--markstream-code-fallback-bg));
1679
- color: var(--vscode-editor-foreground, var(--markstream-code-fallback-fg));
1680
- font:
1681
- 13px/1.55 var(--vscode-editor-font-family, "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
1708
+ background: var(--markstream-code-fallback-bg, var(--code-bg, #fff));
1709
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1710
+ font-family: var(--markstream-code-font-family, Menlo, Monaco, "Courier New", monospace);
1711
+ font-size: var(--vscode-editor-font-size, 12px);
1712
+ font-weight: 400;
1713
+ line-height: var(--vscode-editor-line-height, 18px);
1682
1714
  white-space: pre;
1715
+ backface-visibility: visible;
1716
+ transform: none;
1717
+ -webkit-font-smoothing: auto;
1683
1718
  }
1684
1719
 
1685
1720
  .markstream-svelte .code-pre-fallback code {
@@ -1688,6 +1723,118 @@ body > div[id^="dmermaid-"] {
1688
1723
  background: transparent;
1689
1724
  }
1690
1725
 
1726
+ .markstream-svelte .code-pre-fallback.is-hidden {
1727
+ visibility: hidden;
1728
+ pointer-events: none;
1729
+ }
1730
+
1731
+ /* ── Pre fallback: non-diff line numbers (aligned with markstream-vue PreCodeNode) ── */
1732
+ .markstream-svelte pre[class^='language-'],
1733
+ .markstream-svelte pre[class*=' language-'] {
1734
+ white-space: pre;
1735
+ overflow: auto;
1736
+ -moz-tab-size: 2;
1737
+ -o-tab-size: 2;
1738
+ tab-size: 2;
1739
+ font-variant-ligatures: none;
1740
+ contain: content;
1741
+ backface-visibility: hidden;
1742
+ transform: translateZ(0);
1743
+ -webkit-font-smoothing: antialiased;
1744
+ }
1745
+ .markstream-svelte pre[class^='language-'] > code,
1746
+ .markstream-svelte pre[class*=' language-'] > code {
1747
+ display: block;
1748
+ }
1749
+
1750
+ .markstream-svelte pre.markstream-pre--line-numbers {
1751
+ position: relative;
1752
+ box-sizing: border-box;
1753
+ width: 100%;
1754
+ margin: 0;
1755
+ padding: var(--markstream-code-padding-y, 8px) var(--markstream-code-padding-x, 12px);
1756
+ padding-left: var(--markstream-code-padding-left);
1757
+ overflow: auto;
1758
+ border: 0;
1759
+ border-radius: 0;
1760
+ background: var(--code-bg);
1761
+ color: var(--code-fg);
1762
+ font-family: var(
1763
+ --markstream-code-font-family,
1764
+ Menlo,
1765
+ Monaco,
1766
+ Courier New,
1767
+ monospace
1768
+ );
1769
+ font-size: var(--vscode-editor-font-size, 12px);
1770
+ line-height: var(--vscode-editor-line-height, 18px);
1771
+ }
1772
+
1773
+ .markstream-svelte .code-pre-fallback.markstream-pre--line-numbers {
1774
+ background: var(--markstream-code-fallback-bg, var(--code-bg, #fff));
1775
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1776
+ }
1777
+
1778
+ .markstream-svelte pre[data-markstream-pre='1']:not(.code-pre-fallback):not(.markstream-pre--diff-preview) {
1779
+ box-sizing: border-box;
1780
+ width: 100%;
1781
+ margin: 0;
1782
+ padding: 0;
1783
+ overflow: auto;
1784
+ border: 0;
1785
+ border-radius: 0;
1786
+ background: var(--code-bg, #fff);
1787
+ color: var(--code-fg);
1788
+ box-shadow: none;
1789
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1790
+ font-size: 16px;
1791
+ font-weight: 400;
1792
+ line-height: 28px;
1793
+ }
1794
+
1795
+ .markstream-svelte pre[data-markstream-pre='1']:not(.code-pre-fallback):not(.markstream-pre--diff-preview) > code {
1796
+ color: inherit;
1797
+ background: transparent;
1798
+ font: inherit;
1799
+ }
1800
+
1801
+ .markstream-svelte pre.markstream-pre--line-numbers > .markstream-pre__line-numbers {
1802
+ position: absolute;
1803
+ top: var(--markstream-pre-line-number-top, 0);
1804
+ left: var(--markstream-pre-line-number-left, 0);
1805
+ box-sizing: content-box;
1806
+ display: flex;
1807
+ flex-direction: column;
1808
+ align-items: flex-end;
1809
+ width: var(--markstream-pre-line-number-width, 2ch);
1810
+ min-width: var(--markstream-pre-line-number-width, 2ch);
1811
+ padding-left: var(--markstream-pre-line-number-padding-left, 2ch);
1812
+ padding-right: var(--markstream-pre-line-number-padding-right, 1ch);
1813
+ border-right: var(--markstream-pre-line-number-separator-width, 2px) solid transparent;
1814
+ color: var(--code-line-number);
1815
+ font: inherit;
1816
+ font-variant-numeric: tabular-nums;
1817
+ line-height: inherit;
1818
+ pointer-events: none;
1819
+ -webkit-user-select: none;
1820
+ -moz-user-select: none;
1821
+ user-select: none;
1822
+ }
1823
+
1824
+ .markstream-svelte pre.markstream-pre--line-numbers:not(.markstream-pre--diff-preview):not(.code-pre-fallback) > .markstream-pre__code {
1825
+ box-sizing: border-box;
1826
+ min-width: 100%;
1827
+ padding-left: var(--markstream-code-padding-left, 52px);
1828
+ padding-right: var(--markstream-code-padding-x, 12px);
1829
+ }
1830
+
1831
+ .markstream-svelte pre.markstream-pre--line-numbers > .markstream-pre__line-numbers > .markstream-pre__line-numbers-text {
1832
+ display: block;
1833
+ min-height: 1lh;
1834
+ text-align: right;
1835
+ white-space: pre;
1836
+ }
1837
+
1691
1838
  .markstream-svelte .code-block-container.is-diff {
1692
1839
  color: var(--markstream-diff-shell-fg);
1693
1840
  border-color: var(--markstream-diff-shell-border);
package/dist/index.px.css CHANGED
@@ -36,7 +36,12 @@ markstream-svelte {
36
36
  --ms-border: var(--border);
37
37
  --ms-popover: var(--background);
38
38
  --ms-popover-foreground: var(--foreground);
39
- --code-fg: hsl(var(--ms-foreground));
39
+ /* Unified default code surface; explicit editor themes may override it. */
40
+ --code-fg: hsl(0 0% 10%);
41
+ --code-bg: #fff;
42
+ --code-border: hsl(var(--ms-border));
43
+ --code-header-bg: hsl(var(--ms-secondary));
44
+ --code-line-number: hsl(var(--ms-muted-foreground));
40
45
  --code-action-fg: hsl(var(--ms-muted-foreground));
41
46
  --code-action-hover-bg: hsl(var(--ms-accent));
42
47
  --code-action-hover-fg: hsl(var(--ms-accent-foreground));
@@ -48,6 +53,9 @@ markstream-svelte {
48
53
  --modal-bg: hsl(var(--ms-popover));
49
54
  --modal-fg: hsl(var(--ms-popover-foreground));
50
55
  --ms-text-label: 12px;
56
+ --ms-radius: 8px;
57
+ --ms-gap-header: 16px;
58
+ --ms-gap-header-main: 10px;
51
59
  --ms-action-btn-padding: 6px;
52
60
  --ms-action-btn-icon: 14px;
53
61
  --ms-inset-panel-x: 10px;
@@ -89,6 +97,9 @@ markstream-svelte {
89
97
  --muted: 217.2 32.6% 17.5%;
90
98
  --muted-foreground: 215 20.2% 65.1%;
91
99
  --ms-accent: 217.2 32.6% 24%;
100
+ --code-fg: hsl(0 0% 93%);
101
+ --code-bg: #111827;
102
+ --code-header-bg: hsl(var(--ms-muted));
92
103
  }
93
104
 
94
105
  .markstream-svelte > :first-child {
@@ -343,8 +354,8 @@ markstream-svelte {
343
354
  overflow: auto;
344
355
  padding: 16px 17.6px;
345
356
  border-radius: 16px;
346
- background: #0f172a;
347
- color: #e2e8f0;
357
+ background: var(--code-bg);
358
+ color: var(--code-fg);
348
359
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
349
360
  }
350
361
 
@@ -1465,8 +1476,9 @@ body > div[id^="dmermaid-"] {
1465
1476
  }
1466
1477
 
1467
1478
  .markstream-svelte .code-block-container {
1468
- --markstream-code-fallback-bg: #ffffff;
1469
- --markstream-code-fallback-fg: #111827;
1479
+ --markstream-code-fallback-bg: var(--code-bg);
1480
+ --markstream-code-fallback-fg: var(--code-fg);
1481
+ --markstream-code-border-color: var(--code-border);
1470
1482
  --markstream-diff-shell-fg: #0f172a;
1471
1483
  --markstream-diff-shell-muted: #64748b;
1472
1484
  --markstream-diff-shell-border: rgba(148, 163, 184, 0.24);
@@ -1498,14 +1510,15 @@ body > div[id^="dmermaid-"] {
1498
1510
  overflow: hidden;
1499
1511
  border: 1px solid rgba(148, 163, 184, 0.24);
1500
1512
  border-radius: 12px;
1501
- background: #ffffff;
1513
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1514
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1502
1515
  box-shadow: 0 18px 38px -28px rgba(15, 23, 42, 0.45);
1503
1516
  }
1504
1517
 
1505
1518
  .markstream-svelte .code-block-container.is-dark,
1506
1519
  .dark .markstream-svelte .code-block-container {
1507
1520
  --markstream-code-fallback-bg: #111827;
1508
- --markstream-code-fallback-fg: #e5e7eb;
1521
+ --markstream-code-fallback-fg: hsl(0 0% 93%);
1509
1522
  --markstream-diff-shell-fg: #e2e8f0;
1510
1523
  --markstream-diff-shell-muted: #94a3b8;
1511
1524
  --markstream-diff-shell-border: rgba(82, 82, 91, 0.56);
@@ -1518,7 +1531,8 @@ body > div[id^="dmermaid-"] {
1518
1531
  --markstream-diff-unchanged-divider: rgba(255, 255, 255, 0.18);
1519
1532
  --markstream-diff-action-hover: rgba(255, 255, 255, 0.08);
1520
1533
  border-color: rgba(71, 85, 105, 0.55);
1521
- background: #0f172a;
1534
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1535
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1522
1536
  box-shadow: 0 22px 44px -30px rgba(2, 6, 23, 0.95);
1523
1537
  }
1524
1538
 
@@ -1542,27 +1556,31 @@ body > div[id^="dmermaid-"] {
1542
1556
  display: flex;
1543
1557
  align-items: center;
1544
1558
  justify-content: space-between;
1545
- gap: 12px;
1546
- padding: 10px 16px;
1547
- border-bottom: 1px solid rgba(148, 163, 184, 0.1);
1559
+ gap: var(--ms-gap-header);
1560
+ padding: var(--ms-inset-panel-y) var(--ms-inset-panel-x);
1561
+ border-bottom: 1px solid var(--code-border);
1562
+ background: var(--code-header-bg);
1563
+ color: var(--code-fg);
1564
+ border-radius: var(--ms-radius) var(--ms-radius) 0 0;
1548
1565
  }
1549
1566
 
1550
1567
  .markstream-svelte .code-block-header__meta {
1551
1568
  display: flex;
1552
1569
  flex: 1 1 auto;
1553
1570
  align-items: center;
1554
- gap: 8px;
1571
+ gap: var(--ms-gap-header-main);
1555
1572
  min-width: 0;
1556
1573
  }
1557
1574
 
1558
1575
  .markstream-svelte .code-block-header__label {
1559
1576
  min-width: 0;
1560
1577
  overflow: hidden;
1561
- color: inherit;
1578
+ color: var(--code-action-fg);
1562
1579
  text-overflow: ellipsis;
1563
1580
  white-space: nowrap;
1564
- font:
1565
- 500 15.2px/1.2 "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
1581
+ font-size: var(--ms-text-label);
1582
+ font-weight: 500;
1583
+ line-height: 1.2;
1566
1584
  }
1567
1585
 
1568
1586
  .markstream-svelte .code-block-header__actions {
@@ -1570,7 +1588,7 @@ body > div[id^="dmermaid-"] {
1570
1588
  flex: 0 0 auto;
1571
1589
  align-items: center;
1572
1590
  justify-content: flex-end;
1573
- gap: 4px;
1591
+ gap: var(--ms-gap-header-actions);
1574
1592
  margin-left: auto;
1575
1593
  }
1576
1594
 
@@ -1604,14 +1622,24 @@ body > div[id^="dmermaid-"] {
1604
1622
  min-height: 96px;
1605
1623
  min-width: 0;
1606
1624
  overflow: hidden;
1607
- background: var(--vscode-editor-background, var(--markstream-code-fallback-bg));
1625
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1608
1626
  }
1609
1627
 
1610
1628
  .markstream-svelte .code-block-body > .code-editor-container,
1611
- .markstream-svelte .code-block-body > .code-pre-fallback {
1629
+ .markstream-svelte .code-block-body > .code-editor-fallback-surface {
1612
1630
  grid-area: 1 / 1;
1613
1631
  }
1614
1632
 
1633
+ .markstream-svelte .code-editor-fallback-surface {
1634
+ min-width: 0;
1635
+ background: var(--markstream-code-fallback-bg, var(--code-bg));
1636
+ }
1637
+
1638
+ .markstream-svelte .code-editor-fallback-surface.is-hidden {
1639
+ visibility: hidden;
1640
+ pointer-events: none;
1641
+ }
1642
+
1615
1643
  .code-block-body--expanded {
1616
1644
  max-height: none;
1617
1645
  }
@@ -1626,16 +1654,15 @@ body > div[id^="dmermaid-"] {
1626
1654
  display: inline-flex;
1627
1655
  align-items: center;
1628
1656
  justify-content: center;
1629
- width: 28px;
1630
- height: 28px;
1631
- padding: 0;
1657
+ padding: var(--ms-action-btn-padding);
1632
1658
  border-radius: 6px;
1633
- color: inherit;
1659
+ color: var(--code-action-fg);
1634
1660
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, opacity 140ms ease;
1635
1661
  }
1636
1662
 
1637
1663
  .markstream-svelte .code-action-btn:hover {
1638
- background: var(--vscode-editor-selectionBackground, rgba(148, 163, 184, 0.18));
1664
+ background: var(--code-action-hover-bg);
1665
+ color: var(--code-action-hover-fg);
1639
1666
  }
1640
1667
 
1641
1668
  .markstream-svelte .code-action-btn__icon,
@@ -1669,17 +1696,25 @@ body > div[id^="dmermaid-"] {
1669
1696
  }
1670
1697
 
1671
1698
  .markstream-svelte .code-pre-fallback {
1699
+ box-sizing: border-box;
1700
+ width: 100%;
1672
1701
  margin: 0;
1673
- padding: 16px;
1702
+ padding: var(--markstream-code-padding-y, 8px) var(--markstream-code-padding-x, 12px);
1703
+ padding-left: var(--markstream-code-padding-left, 52px);
1674
1704
  max-height: 500px;
1675
1705
  overflow: auto;
1676
1706
  border: 0;
1677
1707
  border-radius: 0;
1678
- background: var(--vscode-editor-background, var(--markstream-code-fallback-bg));
1679
- color: var(--vscode-editor-foreground, var(--markstream-code-fallback-fg));
1680
- font:
1681
- 13px/1.55 var(--vscode-editor-font-family, "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
1708
+ background: var(--markstream-code-fallback-bg, var(--code-bg, #fff));
1709
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1710
+ font-family: var(--markstream-code-font-family, Menlo, Monaco, "Courier New", monospace);
1711
+ font-size: var(--vscode-editor-font-size, 12px);
1712
+ font-weight: 400;
1713
+ line-height: var(--vscode-editor-line-height, 18px);
1682
1714
  white-space: pre;
1715
+ backface-visibility: visible;
1716
+ transform: none;
1717
+ -webkit-font-smoothing: auto;
1683
1718
  }
1684
1719
 
1685
1720
  .markstream-svelte .code-pre-fallback code {
@@ -1688,6 +1723,118 @@ body > div[id^="dmermaid-"] {
1688
1723
  background: transparent;
1689
1724
  }
1690
1725
 
1726
+ .markstream-svelte .code-pre-fallback.is-hidden {
1727
+ visibility: hidden;
1728
+ pointer-events: none;
1729
+ }
1730
+
1731
+ /* ── Pre fallback: non-diff line numbers (aligned with markstream-vue PreCodeNode) ── */
1732
+ .markstream-svelte pre[class^='language-'],
1733
+ .markstream-svelte pre[class*=' language-'] {
1734
+ white-space: pre;
1735
+ overflow: auto;
1736
+ -moz-tab-size: 2;
1737
+ -o-tab-size: 2;
1738
+ tab-size: 2;
1739
+ font-variant-ligatures: none;
1740
+ contain: content;
1741
+ backface-visibility: hidden;
1742
+ transform: translateZ(0);
1743
+ -webkit-font-smoothing: antialiased;
1744
+ }
1745
+ .markstream-svelte pre[class^='language-'] > code,
1746
+ .markstream-svelte pre[class*=' language-'] > code {
1747
+ display: block;
1748
+ }
1749
+
1750
+ .markstream-svelte pre.markstream-pre--line-numbers {
1751
+ position: relative;
1752
+ box-sizing: border-box;
1753
+ width: 100%;
1754
+ margin: 0;
1755
+ padding: var(--markstream-code-padding-y, 8px) var(--markstream-code-padding-x, 12px);
1756
+ padding-left: var(--markstream-code-padding-left);
1757
+ overflow: auto;
1758
+ border: 0;
1759
+ border-radius: 0;
1760
+ background: var(--code-bg);
1761
+ color: var(--code-fg);
1762
+ font-family: var(
1763
+ --markstream-code-font-family,
1764
+ Menlo,
1765
+ Monaco,
1766
+ Courier New,
1767
+ monospace
1768
+ );
1769
+ font-size: var(--vscode-editor-font-size, 12px);
1770
+ line-height: var(--vscode-editor-line-height, 18px);
1771
+ }
1772
+
1773
+ .markstream-svelte .code-pre-fallback.markstream-pre--line-numbers {
1774
+ background: var(--markstream-code-fallback-bg, var(--code-bg, #fff));
1775
+ color: var(--markstream-code-fallback-fg, var(--code-fg));
1776
+ }
1777
+
1778
+ .markstream-svelte pre[data-markstream-pre='1']:not(.code-pre-fallback):not(.markstream-pre--diff-preview) {
1779
+ box-sizing: border-box;
1780
+ width: 100%;
1781
+ margin: 0;
1782
+ padding: 0;
1783
+ overflow: auto;
1784
+ border: 0;
1785
+ border-radius: 0;
1786
+ background: var(--code-bg, #fff);
1787
+ color: var(--code-fg);
1788
+ box-shadow: none;
1789
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1790
+ font-size: 16px;
1791
+ font-weight: 400;
1792
+ line-height: 28px;
1793
+ }
1794
+
1795
+ .markstream-svelte pre[data-markstream-pre='1']:not(.code-pre-fallback):not(.markstream-pre--diff-preview) > code {
1796
+ color: inherit;
1797
+ background: transparent;
1798
+ font: inherit;
1799
+ }
1800
+
1801
+ .markstream-svelte pre.markstream-pre--line-numbers > .markstream-pre__line-numbers {
1802
+ position: absolute;
1803
+ top: var(--markstream-pre-line-number-top, 0);
1804
+ left: var(--markstream-pre-line-number-left, 0);
1805
+ box-sizing: content-box;
1806
+ display: flex;
1807
+ flex-direction: column;
1808
+ align-items: flex-end;
1809
+ width: var(--markstream-pre-line-number-width, 2ch);
1810
+ min-width: var(--markstream-pre-line-number-width, 2ch);
1811
+ padding-left: var(--markstream-pre-line-number-padding-left, 2ch);
1812
+ padding-right: var(--markstream-pre-line-number-padding-right, 1ch);
1813
+ border-right: var(--markstream-pre-line-number-separator-width, 2px) solid transparent;
1814
+ color: var(--code-line-number);
1815
+ font: inherit;
1816
+ font-variant-numeric: tabular-nums;
1817
+ line-height: inherit;
1818
+ pointer-events: none;
1819
+ -webkit-user-select: none;
1820
+ -moz-user-select: none;
1821
+ user-select: none;
1822
+ }
1823
+
1824
+ .markstream-svelte pre.markstream-pre--line-numbers:not(.markstream-pre--diff-preview):not(.code-pre-fallback) > .markstream-pre__code {
1825
+ box-sizing: border-box;
1826
+ min-width: 100%;
1827
+ padding-left: var(--markstream-code-padding-left, 52px);
1828
+ padding-right: var(--markstream-code-padding-x, 12px);
1829
+ }
1830
+
1831
+ .markstream-svelte pre.markstream-pre--line-numbers > .markstream-pre__line-numbers > .markstream-pre__line-numbers-text {
1832
+ display: block;
1833
+ min-height: 1lh;
1834
+ text-align: right;
1835
+ white-space: pre;
1836
+ }
1837
+
1691
1838
  .markstream-svelte .code-block-container.is-diff {
1692
1839
  color: var(--markstream-diff-shell-fg);
1693
1840
  border-color: var(--markstream-diff-shell-border);