@kolkrabbi/kol-component 0.176.0 → 0.178.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.176.0",
+  "version": "0.178.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/atoms/Button.jsx

@@ -18,7 +18,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {string} props.iconRight - Icon name to display on the right
  * @param {string} props.iconLeftHover - Icon to show on hover (left position)
  * @param {string} props.iconRightHover - Icon to show on hover (right position)
- * @param {'primary'|'secondary'|'outline'|'ghost'|'grey'|'sunken'} props.tone - the ground (tone-is-the-ground-axis, 2026-09-03) — wins over `variant` on the same element; unset = inherit the wrapper's. `sunken` = the control set's dark well + fg-96 ink (ControlToneSunken); `inverse` aliased
+ * @param {'primary'|'secondary'|'inverted'|'outline'|'ghost'|'grey'|'sunken'} props.tone - the ground (`secondary` = the page surface, `inverted` = the text colour as fill — what `variant="secondary"` paints) (tone-is-the-ground-axis, 2026-09-03) — wins over `variant` on the same element; unset = inherit the wrapper's. `sunken` = the control set's dark well + fg-96 ink (ControlToneSunken); `inverse` aliased
  * @param {string} props.iconOnly - Icon name for icon-only button
  * @param {string} props.iconOnlyHover - Icon to show on hover (icon-only)
  * @param {boolean} props.animateIcon - Disable default hover states to focus on icon animation

package/src/index.js

@@ -159,6 +159,7 @@ export { nearestRatio, RATIOS } from './utilities/ratios.js'
  * useDragResize wear ONE implementation (OneGrabGestureBothRails, 2026-08-30) */
 export { default as useGrabEdge } from './hooks/useGrabEdge.js'
 export { default as markdownToHtml, inlineToHtml } from './utilities/markdownToHtml.js'
+export { default as formatSize } from './utilities/formatSize.js'
 export { default as RecordManager } from './organisms/RecordManager.jsx'
 export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'
 export { default as Table } from './organisms/Table.jsx'

package/src/molecules/ContentCard.jsx

@@ -30,6 +30,7 @@ import ContentText from './ContentText.jsx'
  * the A4 question is open (06-content-card-system.md §4). */
 const RATIOS = {
   file: '1 / 1',
+  slide: '16 / 9', /* a deck is a 1920×1080 stage (slide-variant-and-shelf-preset, 2026-09-03) */
   catalog: '1 / 1.41421',
   article: '16 / 9',
   showcase: '3 / 4',
@@ -43,6 +44,11 @@ const BOX = {
    * like I've said that before" — the ListingCardThumbBorder ruling): the selected
    * state reads from the checked ToggleCheckbox, not a fg-64 border */
   file:  { layout: 'stack', border: null, bg: 'var(--kol-fg-02)', pad: 'var(--kol-pad-card-sm)' },
+  /* SLIDE (slide-variant-and-shelf-preset, kol-client-olina 2026-09-03; user: "they are genuinely
+   * different with 16:9 layout and those exposed properties"): file's stack — cover on top, the
+   * plate below — on the PAGE'S surface, rest and hover (olina's /slide-deck, read off the render).
+   * The plate is not a tone (user: "no just controls"); it is this kind's colour. */
+  slide: { layout: 'stack', border: null, bg: 'var(--kol-surface-primary)', pad: 'var(--kol-pad-card-sm)' },
   /* THE FRAME READS BACKWARDS (CatalogCardFrameAndZoom, kol-website 2026-08-28 — user, on a 212-tile
    * grid: no frame at rest; the old rest value is the hover): a wall of fg-04 frames is a grid of boxes,
    * louder than what they hold. Rest `transparent` (the 1px stays, so the hover step never relayouts),
@@ -88,6 +94,7 @@ const BOX = {
  * has no surface of its own to step, so it dims its title instead. */
 const HOVER = {
   file:  'var(--kol-oq-04)',
+  slide: 'var(--kol-surface-primary)', /* the plate holds its colour on hover; the drawer control is the affordance */
   catalog:  'var(--kol-surface-tertiary)',
   /* article and work take NO surface hover, and that is a decision not a gap:
    * article has no surface of its own (its media frame, when on, steps its
@@ -132,7 +139,10 @@ const MEDIA = {
  *
  * `layout` is the discriminator inside `showcase` because `reveal` was already
  * taken by the consumer's overlay NODE. Its values are the box vocabulary the
- * component already spoke: drawer (default) · canvas. */
+ * component already spoke: drawer (default) · canvas.
+ *
+ * A FIFTH KIND, `slide` (2026-09-03, user-ruled: a deck is genuinely a different
+ * thing from a file — a 16:9 stage carrying a date, a size and a slide count). */
 const ALIAS = { default: 'file', print: 'catalog', work: 'showcase', typeface: 'showcaseCanvas' }
 const LAYOUT_KEY = { canvas: 'showcaseCanvas', drawer: 'showcase' }
 

package/src/molecules/ContentRow.jsx

@@ -47,6 +47,12 @@ const BOX = {
    * full-width grey band under it is heavier than the line itself. Scoped to
    * `default`: catalog and print still carry the same `oq-04`, unruled. */
   file:  { thumb: 48,  ratio: '1 / 1',  pad: `${S2} 0`,     gap: S3, align: 'items-center', divider: true },
+  /* SLIDE (slide-variant-and-shelf-preset, 2026-09-03): file's row with the thumb FILLING the
+   * rung's height and taking its width from 16:9 — 48 tall, 85 wide, the whole frame — not
+   * the 48 square, which cropped a deck to a sliver (read off olina's /slide-deck). `minH` 64
+   * = the 48 thumb plus the row's 8px pads; a fill thumb reads its height off the row's
+   * rung, and without one it fell to the 96 fallback (80 × 142, measured on the showcase). */
+  slide: { thumb: 'fill', ratio: '16 / 9', pad: `${S2} 0`, gap: S3, align: 'items-center', divider: true, minH: 64 },
   /* catalog/print rows render AT 36px — the shipped GridCard list row is a
    * fixed 36 and the Y padding was what pushed it past that. X padding stays;
    * `minH` is now the whole height budget and the row centres inside it. */

package/src/molecules/ContentText.jsx

@@ -57,6 +57,13 @@ const RAMP = {
     card: { title: 'kol-sans-heading-04 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta' },
     row:  { title: 'kol-sans-heading-05 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta' },
   },
+  /* SLIDE — a deck (slide-variant-and-shelf-preset, kol-client-olina 2026-09-03;
+   * user: "they are genuinely different with 16:9 layout and those exposed
+   * properties"). file's voices plus a `meta` line — the slide count. */
+  slide: {
+    card: { title: 'kol-sans-heading-04 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', meta: 'kol-mono-12 text-meta' },
+    row:  { title: 'kol-sans-heading-05 text-emphasis truncate', date: 'kol-mono-12 text-meta', size: 'kol-mono-12 text-meta', meta: 'kol-mono-12 text-meta' },
+  },
   catalog: {
     /* detail truncates (ShellHomeSystem, 2026-08-27): a wrapping blurb set three
      * cards' plates at three heights and misaligned the media */
@@ -138,6 +145,8 @@ const RAMP = {
  * read off the shipped components and the live pages they render on. */
 const ORDER = {
   file:  { card: ['title', ['group', 'date', 'size']], row: ['title', ['group', 'date', 'size']] },
+  /* slide: title, then date · size · slide count on one baseline (read off olina's /slide-deck) */
+  slide: { card: ['title', ['group', 'date', 'size', 'meta']], row: ['title', ['group', 'date', 'size', 'meta']] },
   catalog:  { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
   /* title + body are ONE block in BOTH forms — a `stack`, so they sit on the
    * tight 4px internal gap while tags, kicker and the meta group keep the
@@ -190,6 +199,7 @@ const STACK = {
 
 const GAPS = {
   file: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-2)' },
+  slide: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-2)' },
   catalog: { card: 'var(--kol-spacing-1)', row: 'var(--kol-spacing-2)' },
   article: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)', hero: 'var(--kol-spacing-3)' },
   showcase: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-4)' },

package/src/organisms/ContentFilters.jsx

@@ -265,7 +265,8 @@ const ContentFilters = ({
     /* THE LAW (user ruling 2026-08-27, said "for the 10th time" — ContentFiltersFirstGroupHugs,
      * its WIDTH overruled the same day — ContentFiltersFirstGroupFixedWidth, kol-monitor: "nope
      * not hug, fix a size … if columns, maybe just use one?"): THE FIRST FILTER GROUP IS ONE
-     * CATALOG COLUMN WIDE — `.kol-filters-first` (kol-theme): `(100cqw − 120px) / 6`, the `1fr`
+     * CATALOG COLUMN WIDE — `.kol-filters-first` (kol-theme): one track of the catalog grid AT THE
+     * COUNT IT RENDERS (theme ≥0.137.0 — was `(100cqw − 120px) / 6`, true only at six tracks), the `1fr`
      * of the catalog's `repeat(6, 1fr)` gap 24, measured on the header row as a container so
      * the count/strip beside the groups never narrows it. It sits over the first card; EVERY
      * GROUP AFTER IT FLOWS across the rest of the row, starting over the second. By POSITION,

package/src/organisms/MediaLibraryPages.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
+import formatSize from '../utilities/formatSize.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import Divider from '../atoms/Divider.jsx'
@@ -87,14 +88,7 @@ const SORT_OPTIONS = [
   { value: 'kind', label: 'Kind' },
 ]
 
-/* bytes → weight, duplicated from the client on purpose (§3: the UI never imports it) */
-function formatSize(bytes) {
-  if (bytes == null) return ''
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
-}
+/* bytes → weight: `utilities/formatSize` since 0.178.0 — one copy, exported */
 const formatDate = (iso) => (iso ? new Date(iso).toISOString().slice(0, 10) : '')
 const isImage = (ct) => !!ct && ct.startsWith('image/')
 const isVideo = (ct) => !!ct && ct.startsWith('video/')

package/src/utilities/formatSize.js

@@ -0,0 +1,14 @@
+/**
+ * formatSize — bytes → the weight a file reads as in the media admin
+ * (`1.2 MB`). Lived inside MediaLibraryPages; exported since 0.178.0
+ * (slide-variant-and-shelf-preset, 2026-09-03) because kol-shell's shelf preset
+ * and olina's deck page were restating it byte for byte. Duplicated from the
+ * media client on purpose (§3: the UI never imports the client).
+ */
+export default function formatSize(bytes) {
+  if (bytes == null) return ''
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
+}

package/src/utilities/tone.js

@@ -2,7 +2,12 @@
  * toneClass — the control set's TONE, six values (tone-is-the-ground-axis,
  * kol-client-olina 2026-09-03; the six-tone list is the user's).
  *
- *   primary · secondary · outline · ghost · grey · sunken
+ *   primary · secondary · inverted · outline · ghost · grey · sunken
+ *
+ * `secondary` paints the PAGE SURFACE and `inverted` the text colour as fill
+ * (tone-secondary-is-inverse, 2026-09-03; user: "that tone should be called
+ * secondary. What is currently secondary should be called inverted") — 0.134.0
+ * had lifted `secondary` from Button's variant, which was already an inverse.
  *
  * A tone is a ground-and-ink bundle — `--kol-tone-*` custom properties in
  * kol-theme (kol-components-molecules.css, TONE) that every control paints
@@ -13,9 +18,10 @@
  *
  * `inverse` is `sunken`'s alias (0.117.0's name — ControlToneSunken,
  * kol-website 2026-08-28; user ruling: the control does not invert anything,
- * it sits BELOW the plane it is on).
+ * it sits BELOW the plane it is on) — NOT `inverted`; one kol-website call
+ * still passes it, and it drops when that moves.
  */
-export const TONES = ['primary', 'secondary', 'outline', 'ghost', 'grey', 'sunken']
+export const TONES = ['primary', 'secondary', 'inverted', 'outline', 'ghost', 'grey', 'sunken']
 
 export const toneClass = (tone) =>
   tone === 'inverse' ? 'kol-tone-sunken' : TONES.includes(tone) ? `kol-tone-${tone}` : ''