@kolkrabbi/kol-component 0.206.0 → 0.206.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.206.0",
+  "version": "0.206.1",
   "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/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
  */