@kolkrabbi/kol-component 0.136.0 → 0.138.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.136.0",
+  "version": "0.138.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/ContentRow.jsx

@@ -37,6 +37,10 @@ import ContentText from './ContentText.jsx'
 /* ruled row boxes per variant (the §2 review) — paddings/gaps spell the
  * --kol-spacing-* tokens (2=8 · 3=12 · 4=16 · 6=24), never a literal */
 const S2 = 'var(--kol-spacing-2)', S3 = 'var(--kol-spacing-3)', S4 = 'var(--kol-spacing-4)', S6 = 'var(--kol-spacing-6)'
+/* the showcase SKIN — fill, frame, hover, pad, rung. Named so the column
+ * arrangement can derive from it instead of restating it (TypefaceRowSkin). */
+const BOX_SHOWCASE = { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false }
+
 const BOX = {
   /* NO hover wash (user 2026-08-29, on the variant-reference page: "makes a
    * grey background, remove it"). The default row is a bare ruled line — a
@@ -60,12 +64,23 @@ const BOX = {
    * the content height (136 in a 168 row) with no hairline, the frame steps
    * transparent → fg-08 on hover ("0 → 16 is a big jump"). No md step: the rows
    * were approved at their base values. */
-  showcase: { thumb: 'fill', ratio: '1 / 1', pad: S4, gap: S4, frame: 'transparent', frameHover: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 168, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: false },
+  showcase: BOX_SHOWCASE,
   /* typeface's row is a COLUMN, not a line: a header (name/styles left,
    * classification/year right) with a full-width specimen band under it. The
    * shipped item is `flex-col gap-6`, and forcing it into the horizontal
    * thumb-beside-text shape is what turned its alphabet into a 160px thumb. */
-  showcaseCanvas: { thumb: 0,   ratio: '1 / 1',  pad: S6,            gap: S6, column: true, frame: 'var(--kol-fg-08)', bg: 'transparent', minH: 160, align: 'items-start', hover: 'color-mix(in srgb, var(--kol-surface-on-primary) 1%, transparent)', frameHover: 'color-mix(in srgb, var(--kol-surface-on-primary) 24%, transparent)' },
+  /* ONE SKIN, TWO ARRANGEMENTS (TypefaceRowSkin, kol-website 2026-08-30 — user:
+   * *"I want it to visually have the same look as those pages"*). This box was
+   * hand-written and had drifted into the opposite of its sibling: transparent
+   * fill with an fg-08 outline, against showcase's filled surface with no
+   * outline. Side by side they read as two systems.
+   *
+   * It is DERIVED from `showcase` now, so fill, frame, hover, pad and rung
+   * cannot drift again — there is one set of values. Only the arrangement
+   * differs: no thumb, and `column` stacks the band under the text instead of
+   * laying a thumb beside it. That arrangement is the only reason this key
+   * exists; `variant="typeface"` and `layout="column"` both resolve here. */
+  showcaseCanvas: { ...BOX_SHOWCASE, thumb: 0, column: true, align: 'items-start' },
 }
 
 /* `default` → `file` (user 2026-08-29). The variant was named after being the

package/src/organisms/SettingsPanel.jsx

@@ -16,6 +16,13 @@ import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
  * TWO PRESENTATIONS, ONE ANATOMY (the user's ask): `variant="drawer"` is a
  * right-anchored sheet over a scrim, `variant="overlay"` the same panel
  * centred. Only the shell differs; header · intro · sections · footer are the
+ * NO SCRIM ON THE SETTINGS DRAWER (user 2026-08-30: "remove the background
+ * overlay and blur when settings sidebar is opened"). `backdrop={false}` — the
+ * panel alone, no 60% black wash and no `blur(1px)`. You change how a surface
+ * looks WHILE looking at it, and a scrim hides the thing you are tuning. Escape
+ * and the × still close it; only the dimming is gone. Scoped to this panel —
+ * every other ShellDrawer consumer keeps its backdrop.
+ *
  * same nodes in both. Neither shell is built here — the drawer IS ShellDrawer
  * (scrim, Escape, focus trap, scroll lock, focus return, the × control) and
  * the overlay IS FullscreenOverlay (scrim, Escape, backdrop dismiss, scroll
@@ -94,7 +101,7 @@ export default function SettingsPanel({
   return (
     /* THE APPROVED DRAWER (SettingsPanelApproved, kol-r2b2 2026-08-27 — user: "LOCK
        THIS"): no edge, no shadow, a Divider under the header, the sections. */
-    <ShellDrawer open={open} onClose={onClose} side="right" width={width} header={header} className={className} edge={false} shadow={false}>
+    <ShellDrawer open={open} onClose={onClose} side="right" width={width} header={header} className={className} edge={false} shadow={false} backdrop={false}>
       <div className="flex flex-col gap-4"><Divider />{body}</div>
     </ShellDrawer>
   )