@kolkrabbi/kol-component 0.206.0 → 0.207.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.206.0",
+  "version": "0.207.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/index.js

@@ -159,6 +159,10 @@ export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 /* dev chrome: name an element, agree on a cell, emit one sync line */
 export { default as QuadrantSync } from './utilities/QuadrantSync.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker } from './organisms/MediaLibrary.jsx'
+/* the full-screen file viewer — public 2026-09-04 (user ruling): it already
+ * rendered both mobile viewer views and was module-private, so every consumer
+ * needing a phone viewer hand-rolled one. */
+export { MediaInspector } from './organisms/MediaLibraryPages.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
 export { default as SettingsPanel, LabeledControlSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsMulti, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'

package/src/organisms/Canvas.jsx

@@ -694,7 +694,19 @@ export function ticksFor(originScreen, pxPer, spanScreen, step) {
  * rect is stable for two frames, plus a `ResizeObserver` on the container. Any
  * change is caught by the rect comparison whatever caused it.
  *
- * @param {React.RefObject<HTMLElement>} containerRef - The box the layers are positioned in; must contain a `[data-canvas-frame]`
+ * THE RULER IS A SIBLING OF THE FRAME, NOT ITS CHILD — and the container needs
+ * a gutter for the bars to live in. Satisfying `position: relative` and
+ * `[data-canvas-frame]` with the SAME element reads as the obvious move in a
+ * single-canvas app and is wrong: the ruler then positions against the very box
+ * it is measuring and paints its ticks over the artwork. kol-client-olina lost a
+ * cycle to exactly that on 2026-09-04, which is why this paragraph exists:
+ *
+ *   <div ref={containerRef} style={{ position: 'relative', padding: 18 }}>
+ *     <CanvasRuler containerRef={containerRef} virtualWidth={1920} />
+ *     <div data-canvas-frame>…the artwork…</div>
+ *   </div>
+ *
+ * @param {React.RefObject<HTMLElement>} containerRef - The POSITIONED box the layers are drawn in; it must CONTAIN a `[data-canvas-frame]` sibling and leave a gutter (18px) for the bars
  * @param {number} [virtualWidth=CANVAS_VIRTUAL_W] - The frame's width in VIRTUAL px — what `pxPer` divides by, and the vertical guide clamp
  * @returns {{left, top, pxPer, vh, cw, ch}|null} frame offsets, screen-px per virtual px, the frame's virtual height, the container's size
  */

package/src/organisms/MediaLibraryPages.jsx

@@ -169,12 +169,32 @@ function FolderRow({ name, onClick, struck = false }) {
   )
 }
 
-/* The inspector — shell is FullscreenOverlay; the STAGE is kol-r2b2's
- * MediaLightbox, verbatim: scrubbable audio-on video (VideoSheet), AudioSheet,
- * DocPage-through-KindPreview for documents, the facts line, prev / next FIXED
- * at the viewport edges (DocPageAndKindShowcase). Not MediaViewer, which is a
- * gallery — muted/loop/no-controls, image-and-video only. */
-function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl, downloadUrl, keySet }) {
+/**
+ * MediaInspector — the full-screen viewer for one file in a set: image, video
+ * (scrubbable, audio on), audio, or a document page, with the facts line and
+ * prev / next fixed at the viewport edges.
+ *
+ * PUBLIC SINCE 2026-09-04 (user ruling, off `ColumnBrowserMobileViews`: the
+ * mobile viewers are the DS's). It already existed and already rendered both
+ * of the views that ticket drew — it was simply module-private, so every
+ * consumer that needed a phone viewer had to hand-roll one, which is the
+ * outcome the ticket named. Same unweld as the rulers a day earlier: the
+ * component was right, its visibility was not.
+ *
+ * Shell is `FullscreenOverlay` (scrim, Escape, backdrop dismiss, scroll lock).
+ * The stage is kol-r2b2's MediaLightbox verbatim. Not `MediaViewer`, which is a
+ * gallery — muted, looping, no controls, image and video only.
+ *
+ * @param {Array<Object>} files - The set being paged through
+ * @param {number} index - Which one is open
+ * @param {Function} onClose - Dismiss
+ * @param {Function} onPrev - Previous; also ArrowLeft
+ * @param {Function} onNext - Next; also ArrowRight
+ * @param {Function} mediaUrl - `(key) => url` — the consumer's media resolver
+ * @param {Function} downloadUrl - `(key) => url` for the download control
+ * @param {Set|Object} keySet - The bucket's key set, used to find a video's poster
+ */
+export function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl, downloadUrl, keySet }) {
   const o = files[index]
   const [dims, setDims] = useState(null)
   const shownDims = dims && dims.key === o?.key ? dims : null