@kolkrabbi/kol-component 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.20.0",
+  "version": "0.21.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/Input.jsx

@@ -1,4 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
  * Input — single-input atom built on the .kol-control shell.
@@ -31,7 +32,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
  */
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
-const ICON_SIZE = { sm: 14, md: 14, lg: 18 }
 
 export default function Input({
   type = 'text',
@@ -53,7 +53,12 @@ export default function Input({
 }) {
   const isNumber = type === 'number'
   const fixedChars = typeof chars === 'number'
-  const resolvedIconSize = iconSize ?? ICON_SIZE[size] ?? 14
+  // The text-adjacent ladder — an Input's icon sits in the rung's line box
+  // beside the value, exactly like a labelled Button's. `.kol-control-*` and
+  // `.kol-btn-*` carry identical padding + type per rung, so the glyph is the
+  // same too. This was a local ICON_SIZE with `md: 14` until 0.20.1, the last
+  // of the four transcriptions (sm and lg had always agreed).
+  const resolvedIconSize = iconSize ?? glyphSize(size)
 
   // ghost folds into outline (2026-07-08 chrome law): one secondary treatment.
   const resolvedVariant = variant === 'ghost' ? 'outline' : variant

package/src/organisms/MediaLibrary.jsx

@@ -216,10 +216,36 @@ function useCopy() {
   return [copied, copy]
 }
 
+/* A video paints nothing until a frame decodes, so its resting state is a blank
+ * box — no name, no type marker. This gives it the <img alt> equivalent: a play
+ * glyph and the filename behind the video, revealed only while it has nothing
+ * to show. `onLoadedData` is the earliest event that guarantees a frame.
+ *
+ * The loading strategy is deliberately unchanged (lobby/MediaLibraryVideoFallback:
+ * both candidate strategies failed the same way headless, so that measurement
+ * discriminates nothing). This layer needs no decoder to be correct. */
 function Thumb({ row, mediaUrl }) {
-  return isVideo(row.contentType)
-    ? <video src={posterSrc(mediaUrl(row.key))} muted preload="metadata" className="w-full h-full object-cover" />
-    : <img src={mediaUrl(row.key)} alt="" loading="lazy" className="w-full h-full object-cover" />
+  const [painted, setPainted] = useState(false)
+
+  if (!isVideo(row.contentType)) {
+    return <img src={mediaUrl(row.key)} alt="" loading="lazy" className="w-full h-full object-cover" />
+  }
+
+  return (
+    <div className="kol-media-thumb">
+      <span className="kol-media-thumb-fallback" data-painted={painted}>
+        <Icon name="play" size={20} />
+        <span className="kol-mono-12">{fileName(row.key)}</span>
+      </span>
+      <video
+        src={posterSrc(mediaUrl(row.key))}
+        muted
+        preload="metadata"
+        onLoadedData={() => setPainted(true)}
+        className="relative w-full h-full object-cover"
+      />
+    </div>
+  )
 }
 
 /* Folders, then the tiles or rows. Shared by both views — the modal shell and