@kolkrabbi/kol-component 0.68.0 → 0.68.1

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-component",
3
- "version": "0.68.0",
3
+ "version": "0.68.1",
4
4
  "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -51,6 +51,15 @@ const syntaxTheme = (foregroundToken = 80) => ({
51
51
  display: 'block',
52
52
  borderRadius: 0,
53
53
  border: 'none',
54
+ /* THE BLOCK WRAPS (06-code-surface.md: Block · pre-wrap + overflow-x auto)
55
+ * and this is the one place that decides it. oneDark's code style carries
56
+ * `whiteSpace: 'pre'`, and react-syntax-highlighter spreads the theme's
57
+ * code style AFTER its own `wrapLongLines` pre-wrap — so the prop, the
58
+ * .kol-codeblock rule and customStyle all said wrap while the <code>
59
+ * computed `pre`, and every long line scrolled instead (measured on
60
+ * /stack/vcap at 393: block 359 wide, content 465–759, CodeBlockMobile-
61
+ * Overflow, kol-website 2026-08-25). */
62
+ whiteSpace: 'pre-wrap',
54
63
  color: `color-mix(in srgb, var(--kol-surface-on-primary) ${foregroundToken}%, transparent)`
55
64
  },
56
65
  comment: {
@@ -95,7 +104,11 @@ export default function CodeBlock({ children, code: codeProp, language: language
95
104
  wrapLines={true}
96
105
  wrapLongLines={true}
97
106
  PreTag="div"
107
+ /* `kol-codeblock-line` names each wrapped line so the theme can
108
+ * reserve the copy control's lane on the FIRST one when no chip row
109
+ * exists (kol-components-molecules.css). */
98
110
  lineProps={{
111
+ className: 'kol-codeblock-line',
99
112
  style: {
100
113
  border: 'none',
101
114
  background: 'transparent',