Make kaleido pivot keyframable

src/components/PropertiesPanel.vue

@@ -225,17 +225,25 @@ const kaleidoOn = computed(() => !!selected.value?.kaleido)
 
 const kaleidoCountValue = computed(() => selected.value?.kaleidoCount ?? 6)
 
+/** Display value for the layer's kaleido pivot inputs. Reads the
+ *  sampled keyframe value first (so a moving pivot animates the
+ *  number too), then the layer's static legacy override, then the
+ *  layer's own (x, y). Rounded to int for compact display. */
 const kaleidoPivotX = computed(() => {
   const l = selected.value
   if (!l) return 0
+  const s = sampled.value
+  if (s?.kaleidoPivotX !== undefined) return Math.round(s.kaleidoPivotX)
   if (l.kaleidoPivotX !== undefined) return Math.round(l.kaleidoPivotX)
-  return Math.round(sampled.value?.x ?? 0)
+  return Math.round(s?.x ?? 0)
 })
 const kaleidoPivotY = computed(() => {
   const l = selected.value
   if (!l) return 0
+  const s = sampled.value
+  if (s?.kaleidoPivotY !== undefined) return Math.round(s.kaleidoPivotY)
   if (l.kaleidoPivotY !== undefined) return Math.round(l.kaleidoPivotY)
-  return Math.round(sampled.value?.y ?? 0)
+  return Math.round(s?.y ?? 0)
 })
 
 function setKaleidoOn(on: boolean) {
@@ -243,9 +251,15 @@ function setKaleidoOn(on: boolean) {
   store.setLayerKaleido(selected.value.id, on)
 }
 
+/** Pivot writes go through the keyframe pipeline — same flow as
+ *  Transform X/Y. Animators can drop multiple kfs and the orbit
+ *  centre interpolates between them. */
 function setKaleidoPivot(patch: { x?: number; y?: number }) {
   if (!selected.value) return
-  store.setLayerKaleidoPivot(selected.value.id, patch)
+  const props: Partial<import('@/types/scene').AnimatableProps> = {}
+  if (patch.x !== undefined) props.kaleidoPivotX = patch.x
+  if (patch.y !== undefined) props.kaleidoPivotY = patch.y
+  store.upsertKeyframe(selected.value.id, store.playhead, props)
 }
 
 const wiggleOn = computed(() => !!selected.value?.wiggle)