@kolkrabbi/kol-shell 0.19.1 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "private": false,
   "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}.",
   "license": "MIT",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.128.0",
+    "@kolkrabbi/kol-component": "^0.133.0",
     "@kolkrabbi/kol-framework": "^0.35.0",
     "@kolkrabbi/kol-icons": "^0.25.0",
-    "@kolkrabbi/kol-theme": "^0.94.0"
+    "@kolkrabbi/kol-theme": "^0.97.0"
   },
   "files": [
     "src",

package/src/SettingsScaffold.jsx

@@ -10,13 +10,16 @@ import TabStrip from './TabStrip.jsx'
  * `flex:1 overflow:auto` body. Content is consumer-authored via
  * `renderContent(tabValue)` — sections/rows are content, not markup.
  *
- * Building blocks exported for the body: `SettingsSection` (h2 + column) and
- * `LabelRow` (the 160px label-column row — the de-facto standard both repos
- * and monitor's ColorPickerPage share).
+ * Body building blocks live in **kol-component**, not here: `LabeledControlSection`
+ * (the eyebrow-headed section) and `SettingsRow` (the 160px label column).
+ * This file used to export its own `SettingsSection` + `LabelRow` — a second
+ * implementation of that pair, and the DS does not ship two of one thing
+ * (user ruling 2026-08-30: "dont ship duplicate components"). Both retired to
+ * `_tmp/2026-08-30-shell-settings-duplicates/`; kol-component's are the survivors.
  *
  * Shortcuts single-source: both repos hand-maintained the shortcut list twice
  * (settings + overlay) and both pairs drifted. Feed ONE array to both your
- * `ShortcutsOverlay` and a `LabelRow` map here.
+ * `ShortcutsOverlay` and `SettingsShortcuts`.
  *
  * @param {Array} props.tabs - `[{ value, label, title, subtitle }]` — title/subtitle feed the header
  * @param {Function} props.renderContent - `(tabValue) => node`
@@ -47,33 +50,3 @@ export default function SettingsScaffold({ tabs = [], defaultTab, renderContent,
   )
 }
 
-/** Section — `h2` header + 8px column, the body block both repos share. */
-export function SettingsSection({ title, children }) {
-  return (
-    <div>
-      {/* fg-96 on helper-14 — the tab strip's role (PageHeaderMonoTitle addendum 2,
-        * kol-fxr 2026-08-27; was fg-80 / helper-16 with no seam) */}
-      <h2 className="text-fg-96 kol-helper-14" style={{ marginBottom: 16 }}>{title}</h2>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-/**
- * LabelRow — 160px flex-shrink-0 label column + value. `align="center"` for
- * control rows (a toggle), `align="baseline"` (default) for text rows.
- */
-export function LabelRow({ label, align = 'baseline', children }) {
-  return (
-    <div style={{ display: 'flex', gap: 12, alignItems: align }}>
-      {/* 160 wide, but it yields and truncates when the row is squeezed — the label
-        * is the prose, the value is the datum (SettingsShortcutsComboWrap, 2026-08-27) */}
-      <span className="text-fg-48 kol-helper-12 truncate" style={{ flex: '0 1 160px', minWidth: 0 }}>{label}</span>
-      {typeof children === 'string'
-        ? <span className="text-fg-32 kol-helper-12">{children}</span>
-        : children}
-    </div>
-  )
-}

package/src/SettingsShortcuts.jsx

@@ -1,11 +1,17 @@
-import { LabelRow } from './SettingsScaffold.jsx'
+import { SettingsRow } from '@kolkrabbi/kol-component'
+
+/* Was kol-shell's own `LabelRow`, retired 2026-08-30 — it was a second
+ * implementation of kol-component's `SettingsRow` (same 160px label column,
+ * same value cell), and the DS does not ship two of one thing. `align="fill"`
+ * keeps the combo left-aligned in its cell, which is what LabelRow's default
+ * baseline row did. */
 
 /**
  * SettingsShortcuts — the keyboard-shortcuts block of a settings page
  * (ShellHomeSystem, kol-fxr 2026-08-27): the same `[{ section, items: [{ id,
  * label, combo }] }]` array `ShortcutsOverlay` takes, laid out six columns ×
  * two sections per column, filled column-first (user, 2026-08-27) — each
- * section an eyebrow (`kol-eyebrow`, strong ink) over LabelRows. A combo is one
+ * section an eyebrow (`kol-eyebrow`, strong ink) over SettingsRows. A combo is one
  * token by nature — the value cell is `whitespace-nowrap` and the label yields
  * (SettingsShortcutsComboWrap, kol-monitor 2026-08-27: `⌘ K` broke as `⌘` over
  * `K` in the six-column grid — the cell was squeezed to min-content, not full).
@@ -20,9 +26,9 @@ export default function SettingsShortcuts({ sections = [], comboLabel = (c) => c
         <div key={section} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           <span className="kol-eyebrow text-strong mb-2">{section}</span>
           {items.map((k) => (
-            <LabelRow key={k.id ?? k.label} label={k.label}>
+            <SettingsRow key={k.id ?? k.label} label={k.label} align="fill">
               <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{comboLabel(k.combo)}</span>
-            </LabelRow>
+            </SettingsRow>
           ))}
         </div>
       ))}

package/src/index.js

@@ -19,8 +19,7 @@ export { default as PageHeader } from './PageHeader.jsx'
  * where it always did. This package shipped a recreated duplicate 0.1.0–0.2.0;
  * retired 2026-08-15, quarantined in _tmp/. Import it from kol-component. */
 export { default as TabStrip } from './TabStrip.jsx'
-export { default as GridCard } from './GridCard.jsx'
-export { default as SettingsScaffold, SettingsSection, LabelRow } from './SettingsScaffold.jsx'
+export { default as SettingsScaffold } from './SettingsScaffold.jsx'
 export { default as WalkthroughPanel } from './WalkthroughPanel.jsx'
 export { default as ShortcutsOverlay } from './ShortcutsOverlay.jsx'
 export { default as Logomark } from './Logomark.jsx'

package/src/GridCard.jsx

@@ -1,75 +0,0 @@
-/**
- * @deprecated 2026-08-26 — absorbed by `ContentCard variant="catalog" (row: ContentRow variant="catalog")` in @kolkrabbi/kol-component
- * (the Content Set, 2026-08-15). Step 1 of the retirement wave: this export
- * stays and renders unchanged until the next major, then it is removed.
- * Consumers: swap on your next bump. Map + row-by-row diff:
- * docs/documentation/03-components/06-content-card-system.md.
- *
- * GridCard — A4-ratio card for catalog grids (monitor's full cut: expanded
- * 2×2 mode + previewFit). Preview clipped on top, label plate at bottom;
- * `variant="list"` renders the compact 36px row.
- *
- * Recreated from both repos with the shipped divergences fixed:
- * - the label plate's hardcoded `borderTop: rgba(255,255,255,0.06)` (a live
- *   light-theme bug in both apps) → `border-t border-fg-04`
- * - monitor's `textTransform: capitalize` on the list detail dropped (no
- *   auto-casing law — author the string in the case it should render)
- *
- * Preview fits: `.kol-shell-card-preview--{natural|compact|cover}` in
- * kol-theme. Grid geometry law (documented default, both source repos):
- * grid = `repeat(6, 1fr)` gap 24 · list = `repeat(4, 1fr)` gap 8.
- * Neighbour-hiding for `expanded` stays consumer-side.
- */
-export default function GridCard({ title, detail, preview, expanded, expandedContent, onClick, variant, action, previewFit = 'natural' }) {
-  if (variant === 'list') {
-    return (
-      <div
-        onClick={onClick}
-        className="flex items-center justify-between px-3 cursor-pointer bg-surface-tertiary hover:bg-fg-04 rounded border border-fg-04 transition-colors select-none"
-        style={{ height: 36 }}
-      >
-        <span className="kol-helper-12 text-fg-64">{title}</span>
-        {action || (detail && <span className="kol-helper-10 text-fg-32">{detail}</span>)}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      onClick={onClick}
-      className="bg-fg-04 hover:bg-surface-tertiary border border-fg-04"
-      style={{
-        borderRadius: 4, cursor: 'pointer',
-        aspectRatio: expanded ? undefined : '1 / 1.41421',
-        gridColumn: expanded ? 'span 2' : 'span 1',
-        gridRow: expanded ? 'span 2' : 'span 1',
-        position: 'relative', overflow: 'hidden',
-        display: 'flex', flexDirection: expanded ? 'row-reverse' : 'column',
-        transition: 'all 300ms var(--kol-ease-house)',
-      }}
-    >
-      <div style={{
-        overflow: 'hidden',
-        position: 'relative',
-        flex: expanded ? '0 0 50%' : 1,
-        minHeight: 0,
-        minWidth: 0,
-      }}>
-        <div className={`kol-shell-card-preview kol-shell-card-preview--${previewFit}`} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
-          {preview}
-        </div>
-      </div>
-
-      {expanded ? (
-        <div style={{ flex: 1, padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', overflow: 'auto' }}>
-          {expandedContent}
-        </div>
-      ) : (
-        <div className="bg-surface-primary border-t border-fg-04" style={{ padding: '12px 16px', width: '100%' }}>
-          <div className="text-fg-96 kol-helper-14" style={{ marginBottom: 4 }}>{title}</div>
-          {detail && <div className="text-fg-32 kol-helper-8">{detail}</div>}
-        </div>
-      )}
-    </div>
-  )
-}