@kolkrabbi/kol-shell 0.17.1 → 0.18.0

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 (2) hide show
  1. package/package.json +3 -3
  2. package/src/PageShell.jsx +26 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kolkrabbi/kol-shell",
3
- "version": "0.17.1",
3
+ "version": "0.18.0",
4
4
  "private": false,
5
5
  "description": "KOL application shell — fixed 48px NavRail + AppShell layout root, PageShell/PageHeader scaffolds, ContentFilters catalog organism, GridCard, SettingsScaffold, WalkthroughPanel, ShortcutsOverlay. App chrome (kol-framework owns site chrome). Nav items, content, shortcuts and settings are consumer-injected. Sits above @kolkrabbi/kol-{theme,component,framework}.",
6
6
  "license": "MIT",
@@ -20,10 +20,10 @@
20
20
  "react-dom": "^18.3.0 || ^19.0.0"
21
21
  },
22
22
  "devDependencies": {
23
+ "@kolkrabbi/kol-component": "^0.128.0",
23
24
  "@kolkrabbi/kol-framework": "^0.35.0",
24
- "@kolkrabbi/kol-component": "^0.127.0",
25
25
  "@kolkrabbi/kol-icons": "^0.24.0",
26
- "@kolkrabbi/kol-theme": "^0.88.0"
26
+ "@kolkrabbi/kol-theme": "^0.89.0"
27
27
  },
28
28
  "files": [
29
29
  "src",
package/src/PageShell.jsx CHANGED
@@ -9,6 +9,31 @@
9
9
  * Gutter is `--kol-shell-page-pad` (kol-theme). `PageBleed` breaks it for
10
10
  * full-width embeds (monitor's rack bleed).
11
11
  *
12
+ * `scrollbar-gutter: stable` on both modes (PageShellScrollbarGutter,
13
+ * kol-monitor 2026-08-28 — user: "Create is the odd one out"). A page's content
14
+ * width used to depend on whether it scrolls: `scroll` mode scrolls the
15
+ * document, so the viewport's scrollbar takes its width out of the content box;
16
+ * `fixed` mode is `overflow: hidden` and keeps it. That would cost nothing if
17
+ * anything downstream were measured in absolute units — but `.kol-filters-first`
18
+ * is `calc((100cqw - 120px) / 6)` (ContentFiltersFirstGroupFixedWidth), so a
19
+ * scrollbar's width divides by six into the first filter group and every group
20
+ * after it shifts, along with the 6-column grid beneath. One catalog column has
21
+ * to mean one thing on every surface of an app.
22
+ *
23
+ * WHERE the declaration lands is not symmetric, and it is why this is on the
24
+ * component rather than in the theme: in `fixed` mode this element IS the scroll
25
+ * container (`overflow: hidden` qualifies), so it reserves the gutter and its
26
+ * content box matches a scrolling page's. In `scroll` mode it is not one
27
+ * (`overflow: visible`), the property does not apply, and the viewport keeps
28
+ * doing what it already did — so this is inert there rather than a second
29
+ * gutter. Equal widths, one declaration.
30
+ *
31
+ * Inert, too, wherever scrollbars overlay rather than take space (macOS with a
32
+ * trackpad): there was no delta to fix and there is none to introduce.
33
+ * The fuller fix — `html { scrollbar-gutter: stable }` — would also equalise a
34
+ * SHORT scrolling page against a long one; that is an estate-wide change to
35
+ * every consumer's root element and is not this ticket's.
36
+ *
12
37
  * The background is `var(--kol-shell-page-wash, var(--kol-surface-primary))`
13
38
  * (ShellPageWash, 2026-08-27): unset, today's primary pixel; set by
14
39
  * `AppShell pageWash`, a transparent wash over the shell's primary back —
@@ -26,6 +51,7 @@ export default function PageShell({ mode = 'scroll', className = '', style, chil
26
51
  style={{
27
52
  background: 'var(--kol-shell-page-wash, var(--kol-surface-primary))',
28
53
  padding: 'var(--kol-shell-page-pad)',
54
+ scrollbarGutter: 'stable',
29
55
  display: 'flex',
30
56
  flexDirection: 'column',
31
57
  ...modeStyle,